解析Json响应时出错 - Trouble parsing Json response

Trouble parsing Json response

本文关键字：出错响应 Json 解析 | 更新日期: 2023-09-27

我正在尝试解析一个包含产品类别的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）中显示它们，但我如何获得产品信息呢？

最直接的方法是创建一个内部循环并单独访问每个属性

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>