如何使用JavaScript解析JSON格式的数据?

时间:2018-09-27 06:45:17

标签: javascript json parsing

我有一个名为devices.json的外部JSON文件,其内容如下:

{
  "Android":[
    {"modell":"Samsung Galaxy S9+", "version":"8.0", "formfactor":"smartphone"},
    {"modell":"Google Pixel 2XL", "version":"9.0", "formfactor":"smartphone"},
    {"modell":"OnePlus One+", "version":"7.1.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (3rd Generation)", "version":"6.0.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (1st Generation)", "version":"5.1", "formfactor":"smartphone"},
    {"modell":"Phicomm Clue C230", "version":"4.3", "formfactor":"smartphone"},
    {"modell":"Huawei MediaPad M3 Lite 8", "version":"7.0", "formfactor":"tablet"},
    {"modell":"Xiaomi Mi Pad", "version":"5.1", "formfactor":"tablet"},
    {"modell":"Samsung Galaxy Tab 3 (7.0) Lite", "version":"4.2.2", "formfactor":"tablet"},
    {"modell":"Amazon Fire Tablet 7 (5th Gen)", "version":"Fire OS 5.3.3", "formfactor":"tablet"}
  ],
  "iOS":[
    {"modell":"iPhone 7", "version":"12beta", "formfactor":"smartphone"},
    {"modell":"iPhone 5s", "version":"11.4.1", "formfactor":"smartphone"},
    {"modell":"iPad Air", "version":"11.4.1", "formfactor":"tablet"},
    {"modell":"iPad 3", "version":"9.3.5", "formfactor":"tablet"}
  ],
  "Windows":[
    {"version":"Windows 10"},
    {"version":"Windows 8.1"},
    {"version":"Windows 7"}
  ],
  "macOS":[
    {"modell":"Macbook Air", "version":"10.13.5"}
  ],
  "Linux":[
    {"version":"Mint"},
    {"version":"Kubuntu"},
    {"version":"elemetaryOS"},
    {"version":"openSUSE"},
    {"version":"CentOS"},
    {"version":"Fedora"},
    {"version":"Oracle Linux"},
    {"version":"Red Hat"}
  ]
}

现在,我想通过单击按钮来解析它,并产生如下输出:

  

三星Galaxy S9 +(Android 8.0),Google Pixel 2XL(Android 9),OnePlus One等...

我真的不知道如何以最佳方式解析JSON。

像这样吗?

<script>
   function getArray(){
    return $.getJSON('devices.json');
}

getArray().done( function(json) {
    console.log(json); // show the json data in console

    // Android
    for(var i = 0; i < json.Android.length; i++) {
        var obj = json.Android[i];

        console.log(obj);
    }

    // Android
    for(var i = 0; i < json.iOS.length; i++) {
        var obj = json.iOS[i];

        console.log(obj);
    }

});
</script>

2 个答案:

答案 0 :(得分:0)

只需mapjson.Android并记录值。

var data ={
  "Android":[
    {"modell":"Samsung Galaxy S9+", "version":"8.0", "formfactor":"smartphone"},
    {"modell":"Google Pixel 2XL", "version":"9.0", "formfactor":"smartphone"},
    {"modell":"OnePlus One+", "version":"7.1.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (3rd Generation)", "version":"6.0.1", "formfactor":"smartphone"},
    {"modell":"Motorola Moto G (1st Generation)", "version":"5.1", "formfactor":"smartphone"},
    {"modell":"Phicomm Clue C230", "version":"4.3", "formfactor":"smartphone"},
    {"modell":"Huawei MediaPad M3 Lite 8", "version":"7.0", "formfactor":"tablet"},
    {"modell":"Xiaomi Mi Pad", "version":"5.1", "formfactor":"tablet"},
    {"modell":"Samsung Galaxy Tab 3 (7.0) Lite", "version":"4.2.2", "formfactor":"tablet"},
    {"modell":"Amazon Fire Tablet 7 (5th Gen)", "version":"Fire OS 5.3.3", "formfactor":"tablet"}
  ],
  "iOS":[
    {"modell":"iPhone 7", "version":"12beta", "formfactor":"smartphone"},
    {"modell":"iPhone 5s", "version":"11.4.1", "formfactor":"smartphone"},
    {"modell":"iPad Air", "version":"11.4.1", "formfactor":"tablet"},
    {"modell":"iPad 3", "version":"9.3.5", "formfactor":"tablet"}
  ],
  "Windows":[
    {"version":"Windows 10"},
    {"version":"Windows 8.1"},
    {"version":"Windows 7"}
  ],
  "macOS":[
    {"modell":"Macbook Air", "version":"10.13.5"}
  ],
  "Linux":[
    {"version":"Mint"},
    {"version":"Kubuntu"},
    {"version":"elemetaryOS"},
    {"version":"openSUSE"},
    {"version":"CentOS"},
    {"version":"Fedora"},
    {"version":"Oracle Linux"},
    {"version":"Red Hat"}
  ]
};
//Samsung Galaxy S9+ (Android 8.0), Google Pixel 2XL (Android 9), OnePlus One etc...

function test(){
  console.log(data.Android.map(function(item){
    return item.modell;
  }).join(', '));
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button onclick="test()">Parse</button>
</body>
</html>

答案 1 :(得分:0)

假设您将json放入变量myjson中,那么这就是您需要的功能。

function getDevices(){
      var deviceString = '';
      for(var key in myjson) {
        var myOS = myjson[key];
          for(var subkey in myOS){
            if(myOS[subkey].modell){
              deviceString += myOS[subkey].modell + " ";
            }
             deviceString += "(" + key + " "+ myOS[subkey].version + ") ";
          }
      }
      console.log(deviceString);
    }