Javascript loop inside a loop to Get JSON

Question

I want to list Categories and inside each category I want to list subcategories, so I am running loop inside a loop like this, but unfortunately it is returning me like this:

Category(Mobile)
Category(Laptop)
Subcategory(Iphone4)
Subcategory(Iphone5)
Subcategory(Iphone6)
Subcategory(dell1)
Subcategory(dell2)
Subcategory(dell3)

But what I want is some think like this:

Category(Mobile)
Subcategory(Iphone4)
Subcategory(Iphone5)
Subcategory(Iphone6)
Category(Laptop)
Subcategory(dell1)
Subcategory(dell2)
Subcategory(dell3)

Here is my code:

$(document).ready(function()
         {
              var url="https://myjson";
              $.getJSON(url,function(result){
                   $.each(result, function(i, field){
                        var categoryId=field.categoryId;
                        var categoryName=field.categoryName;
                        $("#listview").append("<h3>"+ categoryName + "</h3>");
                        $.each(field.subcategories, function(i, row){
                             var id=row.subCategoryId;
                             var subCategoryName=row.subCategoryName;
                             $("#listviewchild").append("<p>"+ subCategoryName + "</p>");
                        });
                   });
              });
         });

   <div class="container-fluid">
    
     <div id="listview">
     </div>
     <div id='listviewchild'>
     </div>
    </div>

i3lai3la · Accepted Answer · 2017-11-03 07:34:04Z

Basically, from your code, your category will always append on the above of your subcategory based on the html that u have.

Here`s the logic that will append as what you need

javascript

 $(document).ready(function()
         {
              var url="https://myjson";
              $.getJSON(url,function(result){
                   $.each(result, function(i, field){
                        var categoryId=field.categoryId;
                        var categoryName=field.categoryName;
                        $("#listview").append("<h3>"+ categoryName + "</h3>");
                        $.each(field.subcategories, function(i, row){
                             var id=row.subCategoryId;
                             var subCategoryName=row.subCategoryName;
                             $("#listview").append("<p>"+ subCategoryName + "</p>");
                        });
                   });
              });
         });

html

   <div class="container-fluid">

     <div id="listview">
     </div>
    </div>

Ohh Thanks alot it worked, I knew that i have a problem with my code but was not able to find correct logic

Collectives™ on Stack Overflow

Javascript loop inside a loop to Get JSON

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related