Question

我正在尝试使用XMLHttpRequest方法解析并显示JSON数据（产品目录）。我能够显示品牌及其名称，但无法以进度方式展示产品列表。

以下是JSON请求示例：

   {
    "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"
        }]
    }
}

现在我正在使用以下代码以tabluar形式显示数据：

 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）

谢谢！

Answer 1

看看这个例子：

var x = data.key1.children.key4;

var path = "data";
function search(path, obj, target) {
    for (var k in obj) {
        if (obj.hasOwnProperty(k))
            if (obj[k] === target)
                return path + "['" + k + "']"
            else if (typeof obj[k] === "object") {
                var result = search(path + "['" + k + "']", obj[k], target);
                if (result)
                    return result;
            }
    }
    return false;
}

//Then for evry node that you need you can call the search() function.
var path = search(path, data, x);
console.log(path); //data['key1']['children']['key4']

Answer 2

听起来你错过的是＆＃34;当我不知道所有的键时，如何迭代一个物体＆＃34;。

对象是一组键值对。您可以使用for / in syntax：for( var <key> in <object> ){}来获取每个密钥。

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

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
  }
}

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

Answer 3

实现预期我已经用于循环和HTML DOM的createElement（）方法

          var product_catalog = {
        "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"
          }]
        }
      };

      var output = document.querySelector('#product tbody');

               function build(JSONObject) {
        /**get all keys***/
        var keys = Object.keys(JSONObject);
        /**get all subkeys***/ 
        var subkeys = Object.keys(JSONObject[keys]);
        console.log(subkeys);
        /**loop sub keys to build HTML***/
        for (var i = 0, tr, td; i < subkeys.length; i++) {
          tr = document.createElement('tr');
          td = document.createElement('td');
          td.appendChild(document.createTextNode(subkeys[i]));
          tr.appendChild(td);
          output.appendChild(tr);
        }
      };

      build(product_catalog);

HTML：

参考的网址 - http://codepen.io/nagasai/pen/xOOqMv

希望这适合你：）

Answer 4

听起来你正在寻找的只是＆＃34;产品＆＃34;的一系列钥匙。宾语。例如：

Products: ["laptop", "cellphone", "tablets"];

如果是这样，我会通过javascript＆＃39; Object.keys()方法运行你的json对象。

var jsonObj = JSON.parse(http_request.responseText);
var products = Object.keys(jsonObj.products);
// products = ["laptop", "cellphone", "tablets"];

Answer 5

我认为这就是你要问的问题，你可以使用Object.keys获取一个对象的属性，然后循环遍历它们。

var data = {
  "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"
    }]
  }
}

var typesOfProducts = Object.keys(data.products)

console.log(typesOfProducts)

document.getElementById('output').textContent = typesOfProducts.toString()

//Then, to loop through
var i = -1,
  len = typesOfProducts.length

function handleProduct(productType) {
  console.log("This is the " + productType + " data.")
  console.log(data.products[productType])
}

while (++i < len) {
  handleProduct(typesOfProducts[i])
}

<div id="output"></div>

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

5 个答案: