如何在 Javascript 中解析嵌套的 JSON?

问题描述

我正在尝试使用 XMLHttpRequest 方法解析和显示 JSON 数据(产品目录).我可以显示品牌及其名称，但无法以编程方式显示产品列表.

I am trying to parse and show JSON data (product catalog) using XMLHttpRequest method. I am able to display the brands and their names, but not able to showcase list of products progmatically.

这是示例 JSON 请求:

Here is the sample JSON request:

   {
    "products": {
        "laptop": [{
            "brand": "sony",
            "price": "$1000"
        }, {
            "brand": "acer",
            "price": "$400"
        }],
        "cellphone": [{
            "brand": "iphone",
            "price": "$800"
        }, {
            "brand": "htc",
            "price": "$500"
        }],
        "tablets": [{
            "brand": "iPad",
            "price": "$800"
        }, {
            "brand": "htc-tab",
            "price": "$500"
        }]
    }
}

现在我使用以下代码以表格形式显示数据:

Right now I am using following code to show data in tabluar form:

 function loadJSON() {

        var data_file = "http://localhost/AJAX/productcatalog.json";

        var http_request = new XMLHttpRequest();

        http_request.onreadystatechange = function () {

            if ((http_request.readyState == 4) && (http_request.status == 200)) {

                // Javascript function JSON.parse to parse JSON data
                var jsonObj = JSON.parse(http_request.responseText);
                data = '<table border="2"><tr><td>Type</td><td>Brand</td><td>Price</td></tr>';
                var i = 0;
                debugger;
                for (i = 0; i < jsonObj["products"].laptop.length; i++)
                {

                    obj = jsonObj["products"].laptop[i];

                    data = data + '<tr><td>laptop</td><td>' + obj.brand + '</td><td>' + obj.price + '</td></tr>';
                }
                for (i = 0; i < jsonObj["products"].cellphone.length; i++)
                {

                    obj = jsonObj["products"].cellphone[i];

                    data = data + '<tr><td>laptop</td><td>' + obj.brand + '</td><td>' + obj.price + '</td></tr>';
                }

                for (i = 0; i < jsonObj["products"].tablets.length; i++)
                {

                    obj = jsonObj["products"].tablets[i];

                    data = data + '<tr><td>laptop</td><td>' + obj.brand + '</td><td>' + obj.price + '</td></tr>';
                }

                data += '</table>';

                document.getElementById("demo").innerHTML = data;


            }
        }

        http_request.open("GET", data_file, true);
        http_request.send();
    }

问题 获取产品列表的方式是什么，即产品、手机和平板电脑?现在我已经对它进行了硬编码，以便获取完整的品牌列表.请指教.(我想使用普通的 javascript 而不是 jquery)

Question What is the way to fetch product list , i.e. products, cellphone and tablets ? Right now I have hardcoded that in order to fetch complete list of brands. Please advice. (I want to use plain javascript and not jquery)

谢谢！

推荐答案

听起来您缺少的是当我不知道所有键时如何迭代对象".

It sounds like what you're missing is the "How do I iterate over an object when I don't know all the keys".

一个对象是一组键值对.您可以使用 for/in 语法:for( var in ){} 来获取每个键.

An object is a set of key, value pairs. You can use for/in syntax: for( var <key> in <object> ){} to get each key.

对于您的用例，它可能类似于:

For your use case it might be something like:

var products = jsonObject['products'];
for( var productName in products ){
  //productName would be "laptop", "cellphone", etc.
  //products[productName] would be an array of brand/price objects
  var product = products[productName];
  for( var i=0; i<product.length; i++ ){
    //product[i].brand
    //product[i].price
  }
}

在实践中，我可能会使用一些不那么冗长的东西，但这样更容易理解发生了什么.

In practice, I might use something a little less verbose, but this makes it easier to understand what is going on.

这篇关于如何在 Javascript 中解析嵌套的 JSON?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！