我如何通过jQuery解析多个或多个对象?

时间:2018-06-10 13:55:04

标签: javascript jquery html

这是我想通过jQuery解析的JSON(C2RReleaseData.json)文件

[
  {
    "FFN": "1d2d2ea6-1680-4c56-ac58-a441c8c24ff9",
    "Order": 100,
    "AvailableBuild": "16.0.10228.20033",
    "ThrottleLevel": 1000,
    "LkgBuild": "16.0.9330.2087",
    "ExpiredBuilds": [],
    "UpdatedTimeUtc": "2018-06-08T17:05:34.347",
    "OfficeTenantIds": [],
    "OfficeProductNames": [],
    "OfficeCultures": [],
    "OfficeBitness": [],
    "OsVersions": [],
    "IsDefault": true
  },
  {
    "FFN": "2c508370-a266-4cfc-8877-af06fdeb0c24",
    "Order": 100,
    "AvailableBuild": "16.0.8067.2032",
    "ThrottleLevel": 1000,
    "LkgBuild": "16.0.8067.2032",
    "ExpiredBuilds": [],
    "UpdatedTimeUtc": "2018-03-26T05:51:05.723",
    "OfficeTenantIds": [],
    "OfficeProductNames": [],
    "OfficeCultures": [],
    "OfficeBitness": [],
    "OsVersions": [],
    "IsDefault": true
  }
]

这是我的index.html文件的内容:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.get('https://raw.githubusercontent.com/danielhoset27/test1/master/C2RReleaseData.json', function(obj) {
  document.writeln(obj.[0]FFN + " : " + obj.[0]AvailableBuild)
  document.writeln(obj.[1]FFN + " : " + obj.[1]AvailableBuild)
});
</script>

然而,当我进入我的网站时,我得到了

undefined : undefined
undefined : undefined

这是一个想要我的网站显示的例子

1d2d2ea6-1680-4c56-ac58-a441c8c24ff9 : 16.0.10228.20033
2c508370-a266-4cfc-8877-af06fdeb0c24 : 16.0.8067.2032

2 个答案:

答案 0 :(得分:0)

如@Pointy所述,您的代码中存在多个语法错误(访问obj数组时)。

但是,即使修复了这些语法错误,它也无法工作的原因是API调用的结果是一个字符串,您需要使用JSON.parse()解析它。

$.get('https://raw.githubusercontent.com/danielhoset27/test1/master/C2RReleaseData.json', function(obj) {
  // Parse the received json
  const result = JSON.parse(obj);
  // Fix the syntax errors
  document.writeln(result[0].FFN + " : " + result[0].AvailableBuild);
  // Add a line break
  document.write('<br />')
  // Fix the syntax errors again
  document.writeln(result[1].FFN + " : " + result[1].AvailableBuild);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

另外考虑使用Fetch API是您的目标浏览器支持它。

const appendItem = item => document.body.innerHTML += `<p>${item.FFN} : ${item.AvailableBuild}</p>`;

fetch('https://raw.githubusercontent.com/danielhoset27/test1/master/C2RReleaseData.json').then(response => {
  response.json().then(result => {
    appendItem(result[0]);
    appendItem(result[1]);
  });
});

答案 1 :(得分:0)

尝试此代码

$(document).ready(function(){
    var url  = 'https://raw.githubusercontent.com/danielhoset27/test1/master/C2RReleaseData.json';
        $.getJSON(url, function( data ) {
            for(var i in data){
                console.log(data[i].FFN + " : " + data[i].AvailableBuild)
            }
        });
    });