How to fetch the json array?

Question

I have my external json and trying to fetch the json values dynamically in my javascript. I am able to fetch the first level values and when I try to fetch the array object, it is showing my result as undefined. However when I try this "alert(data.siteAttribute[0].data[0].label);" its returning the the value.

Here is the following that I have tried

$(document).ready(function() {
	
 $.getJSON("https://api.myjson.com/bins/naqzj", function(data) { 
 
   $(".test").html('<div class="card-deck">');
    var output = "";
    for (var i in data.siteAttribute) {
		output += "<div class='col-md-4 col-lg-3'><div class='card  site-attribute-card'>";
		
		output += "<span class='sticker sticker-rounded sticker-top-right'><span class='inline-item'><img height='50' width='50' src='"+data.siteAttribute[i].data.imageURL +"'/></span></span>";
		
		output += "<div class='card-body'> <div class='card-row'>"
        output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.label + "</div>";
        output += "<div class='card-text'>" + data.siteAttribute[i].data.value + "</div>";
		output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.operatinghours + "</div>";
        output += "<div class='card-text'>" + data.siteAttribute[i].data.hours + "</div>";
		output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].data.areaLabel + "</div>";
        output += "<div class='card-text'>" + data.siteAttribute[i].data.areaValue + "</div>";
		output +="<div class='card-title text-truncate'>" + data.siteAttribute[i].dateModified + "</div>";
        output +="<div class='card-text'>" + data.siteAttribute[i].date + "</div>";
		output += "</div></div>"; 
		
		output += "<div class='card-footer'>";
		output += "<div class='card-title text-truncate' title='Card Title'>"+ data.siteAttribute[i].name + "<span class='label label-tag label-category right'><span class='label-item label-item-expand'>"+data.siteAttribute[i].status+"</span></span></div>";
		output += "<div class='card-links'><a href='/group/retail/site-management-form'>Edit</a><a class='right' href='#'>View</a></div></div>"
		output += "</div></div>";    
	}
    $(".test .card-deck").append(output); 
    $(".test .card-deck").append('</div>'); 
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<div class="test container">
</div>

Here is my sample fiddle for reference. I am missing the loop fro the array and have no clues on how to figure out. Thanks in advance!

Could you help me out on how to add the second loop in the fiddle ? — Geek
– Geek, Commented Jun 3, 2019 at 0:46

abney317 · Accepted Answer · 2019-06-03 00:36:23Z

1

data.siteAttribute[i].data is an array

So you can use data.siteAttribute[i].data[0] to get the first item or you'll have to loop through that data as well.

answered Jun 3, 2019 at 0:36

abney317

8,5927 gold badges36 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Geek Over a year ago

Thanks for your input. I am not sure that I am using it in the right way. Here is what I have tried as a second loop " for (var j in data.siteAttribute.data){.. }" but its not showing anything

Pablo · Accepted Answer · 2019-06-03 00:46:59Z

0

Looks like you are only having issues with having nested loops. To loop over an array of objects I suggest I suggest using Array.prototype.forEach. To simplify your demo I have removed all the HTML markup and nested two forEach loops to parse over the JSON data. Please review the demo and inline comments below:

$(document).ready(function() {
  $.getJSON("https://api.myjson.com/bins/naqzj", function(result) {
    // Loop over the top level attributes
    result.siteAttribute.forEach(function(attr) {
      // Loop over the attribute `data` array
      attr.data.forEach(function(attrData) {
        // For demo purposes, loop over the inner data object and print its props and values
        for (var key in attrData) {
          console.log(key, ' -> ', attrData[key]);
        }
      });
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

answered Jun 3, 2019 at 0:46

Pablo

6,0767 gold badges38 silver badges52 bronze badges

1 Comment

Geek Over a year ago

That's awesome! Thanks a lot for the detailed explanation.

Collectives™ on Stack Overflow

How to fetch the json array?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related