Question

我试图了解JSON文件，使用本机js加载和访问属性并在html上显示它们。

这是我的JSON文件/

      {
      "London": [
        {
          "Manchester": [
            {
              "id": 1,
              "isFurnished": true,
              "price": "1300",
              "hasBalcony": true,
              "bedRooms": 2,
              "type": "Long term",
              "features": {
                "security": "Secure Gated Parking",
                "access": "Close To Schools & Doctors"
              }
            },
  {
              "id": 2,
              "isFurnished": true,
              "price": "1300",
              "hasBalcony": true,
              "bedRooms": 2,
              "type": "Long term",
              "features": {
                "security": "Secure Gated Parking",
                "access": "Close To Schools & Doctors"
              }
            },
            "Manchester Area",
            [
              {
                "id": "Manchester Science Park",
                "isFurnished": false,
                "price": "739",
                "hasBalcony": false,
                "bedRooms": 1,
                "type": "Moderate term",
                "features": {
                  "fun": "On-site cafe",
                  "parking": "Options for car parking",
                  "meeting": "Free informal meeting space"
                }
              },
              {
                "id": "Manchester Science Park",
                "isFurnished": false,
                "price": "739",
                "hasBalcony": false,
                "bedRooms": 1,
                "type": "Moderate term",
                "features": {
                  "fun": "On-site cafe",
                  "parking": "Options for car parking",
                  "meeting": "Free informal meeting space"
                }
              },
              {
                "id": "Manchester Science Park",
                "isFurnished": false,
                "price": "739",
                "hasBalcony": false,
                "bedRooms": 1,
                "type": "Moderate term",
                "features": {
                  "fun": "On-site cafe",
                  "parking": "Options for car parking",
                  "meeting": "Free informal meeting space"
                }
              }
            ]
          ]
        }
      ]
    }

Okey，这是我的JSON。正如你所看到的，我想为我建立房地产并将一些项目作为投资组合。

例如，当页面加载时，我想显示特定城市的每个列表。例如。在我的JSON我有曼彻斯特，但我会有更多的城市。因此，页面加载和每个城市都显示曼彻斯特，伦敦，切尔西等。因此，当单击项目曼彻斯特时，显示曼彻斯特阵列下的每个对象。

怎么回事呢？

Answer 1

在这个例子中，我使用ajax读取json文件并将其作为Javascript对象返回。 XMLHTTPrequest会出去抓取我们的json文件，将其作为纯文本阅读，我们的JSON.parse()方法会将json转换为javascript对象。从那里你可以随意处理数据。

    function getJsonObject(cb){
            // read text from URL location
            var request = new XMLHttpRequest();
            request.open('GET', 'js/yourjson.json', true);
            request.send(null);
            request.onreadystatechange = function () {
                if (request.readyState === 4 && request.status === 200) {
                    var type = request.getResponseHeader('Content-Type');

                           try {
                             cb(JSON.parse(request.responseText);
                           }catch(err) {
                             cb(err);
                           }
                }
            }
        }

现在要访问jsonObject，你试图通过将callback function作为参数传递给getJsonObject函数来达到调用函数。

getJsonObject(function(object){
     //Do what you want with the object here
     console.log(object);
});

使用纯JavaScript加载JSON文件，没有框架，没有jQuery

1 个答案: