Question

我正在尝试解析包含产品类别的JSON文件，然后解析这些类别中的产品，并将其显示在div中。

我的问题：虽然我可以获得类别，但我不知道如何询问产品（并将它们显示在类别下）。

我的剧本：

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script>
  $.getJSON('https://example.com/GetProductList/', function(data) {
        var output="<ul>";
        for (var i in data.Categories) {
            output+="<li>" + data.Categories[i].Category + "</li>";
        }
        output+="</ul>";
        document.getElementById("testdiv").innerHTML=output;
  });
</script>

我试图解析的JSON：

{
  "List": "GetProductList",
  "Categories": [{
    "Category": "Featured",
    "Products": [{
      "product_id": "2",
      "short_description": "short desc 2",
      "cost": "20"
    }]
  }, {
    "Category": "Automotive",
    "Products": ""
  }, {
    "Category": "Electronics",
    "Products": ""
  }, {
    "Category": "Sporting Goods",
    "Products": [{
      "product_id": "2",
      "short_description": "short desc 2",
      "cost": "20"
    }, {
      "product_id": "3",
      "short_description": "short desc 3",
      "cost": "30"
    }]
  }, {
    "Category": "Housewares",
    "Products": [{
      "product_id": "1",
      "short_description": "short desc",
      "cost": "10"
    }]
  }, ]
}

我能够获取类别并在div（testdiv）中显示它们，但我如何获得产品信息？

Answer 1

最直接的方法是制作内循环并单独访问每个属性

for (var i in data.Categories) {
   output += "<li>" + data.Categories[i].Category + "</li>";
   output += "<ul>";
   for (var j in data.Categories[i].Products) {
     output += "<li>" + data.Categories[i].Products[j].cost + "</li>";
     output += "<li>" + data.Categories[i].Products[j].product_id + "</li>";
     output += "<li>" + data.Categories[i].Products[j].short_description + "</li>";
   }
   output += "</ul>";
 }

var data = {
   "List": "GetProductList",
   "Categories": [{
     "Category": "Featured",
     "Products": [{
       "product_id": "2",
       "short_description": "short desc 2",
       "cost": "20"
     }]
   }, {
     "Category": "Automotive",
     "Products": ""
   }, {
     "Category": "Electronics",
     "Products": ""
   }, {
     "Category": "Sporting Goods",
     "Products": [{
       "product_id": "2",
       "short_description": "short desc 2",
       "cost": "20"
     }, {
       "product_id": "3",
       "short_description": "short desc 3",
       "cost": "30"
     }]
   }, {
     "Category": "Housewares",
     "Products": [{
       "product_id": "1",
       "short_description": "short desc",
       "cost": "10"
     }]
   }, ]
 };
 var output = "<ul>";
 for (var i in data.Categories) {
   output += "<li>" + data.Categories[i].Category + "</li>";
   output += "<ul>";
   for (var j in data.Categories[i].Products) {
     output += "<li>" + data.Categories[i].Products[j].cost + "</li>";
     output += "<li>" + data.Categories[i].Products[j].product_id + "</li>";
     output += "<li>" + data.Categories[i].Products[j].short_description + "</li>";
   }
   output += "</ul>";
 }
 output += "</ul>";
 document.getElementById("testdiv").innerHTML = output;

<div id="testdiv"></div>

无法解析Json响应

1 个答案: