Question

我有我的外部json，并尝试在我的JavaScript中动态获取json值。我能够获取第一级值，并且当我尝试获取数组对象时，它会将我的结果显示为未定义。但是，当我尝试使用此“ alert（data.siteAttribute [0] .data [0] .label）;” 时，它会返回值。

以下是我尝试过的内容

$(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>

这是我的示例fiddle供参考。我错过了数组的循环，并且不知道如何弄清楚。预先感谢！

Answer 1

data.siteAttribute[i].data是一个数组

因此，您可以使用data.siteAttribute[i].data[0]来获取第一项，或者也必须遍历该数据。

Answer 2

看起来您只在嵌套循环方面遇到问题。我建议遍历对象数组，建议使用Array.prototype.forEach。为了简化您的演示，我删除了所有HTML标记，并嵌套了两个forEach循环以解析JSON数据。请在下面查看演示和内联评论：

$(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>

如何获取json数组？

2 个答案: