我正在努力访问下面的 json 代码。我以前见过的每个 json 值都是这样的:
var hold = { name: 'alex', job: 'realtor'}
因此,要访问该名称,我会执行类似hold.name 的操作。但我的 json 数据看起来像这样
[
[
{
"count": "80",
"countTxt":"Buyer logins",
"participantsTxt":"Total for all participating member companies:",
"participantCount":"523"
},
{
"count": "233",
"countTxt":"Searches",
"participantsTxt":"Total for all participating member companies:",
"participantCount":"628"
},
{
"count": "533",
"countTxt":"Views of our member pages",
"participantsTxt":"Total for all participating member companies:",
"participantCount":"2,365"
}
],
[
{
"count": "80",
"countTxt":"Total vists",
"participantsTxt":"Total for all participating member companies:",
"participantCount":"412"
},
{
"count": "53",
"countTxt":"Unique visitors",
"participantsTxt":"Total for all participating member companies:",
"participantCount":"731"
},
{
"count": "1:12 min",
"countTxt":"Total time spent on page",
"participantsTxt":"Total for all participating member companies:",
"participantCount":"784.2 mins"
}
]
]
数据是嵌套的,并且没有名称,所以我不知道如何访问。我知道这个问题似乎有些基本,但我还没有看到任何解析类似这样的代码的示例。它始终是一个更简单的示例,如上面的示例。我的 .getjson 代码看起来像这样......
var requestURL = 'assets/js/stats.json';
$.getJSON(requestURL, function(data){
$.each(data, function(key, value) {
$('body').append($('<div>' + data[0].name, {
}));
console.log(data);
});
});
我的控制台返回两个如下所示的对象
Array[3], Array[3]] Array[3]:
Array[3] [Array[3], Array[3]]
所以我知道它正在获取数据,我只需要能够选择我想要的内容并将其附加到 DOM 中。我尝试了十种不同的变体,但没有任何效果。请帮忙!?
您只需要在第一次迭代中再迭代一次。您有一个包含对象数组的数组。所以尝试这样的事情
http://jsfiddle.net/mnth1xe1/5/
$.each(data, function(key, val) {
$.each(val, function(key, value) {
console.log(value.countTxt);
});
});
很抱歉复活了一个古老的问题,但是,好吧,有赏金! 🙂
提问者混淆了对象和数组。对象由大括号 (
{...}
) 包围,而数组则使用方括号 ([...]
)。
一个对象具有命名元素,如示例所示:
var hold = { name: 'alex', job: 'realtor'}
首先,我要指出的是,上面的内容不是有效的 JSON。 JSON 中的对象键必须始终加引号。作为有效的 JSON,我们将查看:
{ "name": "alex", "job": "realtor" }
您可以通过两种方式对对象中的键进行寻址:
hold.name
hold['name']
它们是等效的,但如果元素的名称不是有效的标识符,则点表示法将不起作用。假设您将这个超级设计的示例存储在
hold
:
```lang-json
{ "name": "alex", "job*title": "realtor" }
```
hold.job*title
将失败,因为它将解析为 hold.job
乘以 title
。 undefined * undefined
是undefined
。不是我们想要的!相反,您需要使用 hold['job*title']
,它将像我们预期的那样解析为 'realtor'
。
另一方面,数组只是一个有序列表。为了访问它们的内容,我们总是使用方括号表示法。例如,如果我们给出:
var data = ['alex', 'realtor'];
然后我们可以分别将值
alex
和 realtor
访问为 hold[0]
和 hold[1]
。
好吧,排除了这一点,我们可以继续前进。随着我们的进展,我们将解决您的代码的一些其他问题。
首先:在
$.each
循环中,您尝试引用 data[0].name
。但是 data
是完整的 JSON 响应;您通常不想在循环内使用它。相反,使用循环变量,value
:
var requestURL = 'assets/js/stats.json';
$.getJSON(requestURL, function(data){
$.each(data, function(key, value) {
$('body').append($('<div>' + value[0].name, {}));
console.log(data);
});
});
在 JSON 数据中,您有对象 在嵌套数组中:
[
[
{
...
}
],
[
{
...
}
]
]
在示例中,每个内部数组仅包含一个元素。仅凭一个例子我无法判断情况是否总是如此。如果不是,您还需要通过嵌套对
$.each
: 的额外调用来迭代内部数组
var requestURL = 'assets/js/stats.json';
$.getJSON(requestURL, function(data){
$.each(data, function(key, innerList) {
$.each(innerList, function(key, item) {
$('body').append($('<div>' + value.name, {}));
console.log(data);
});
});
});
我将假设内部数组中可以有多个元素。即使情况并非如此,此代码也将起作用。
最后,让我们回顾一下您的 JSON。每个
item
看起来像这样:
{
"count": "80",
"countTxt":"Total visits",
"participantsTxt":"Total for all participating member companies:",
"participantCount":"412"
}
它没有
.name
,所以 value.name
将是 undefined
。我不确定您想要显示什么,因此出于本答案的目的,我只是猜测我们想要显示类似 80 Total visits
的内容。
因此我们得出这样的结论:
var requestURL = 'assets/js/stats.json';
$.getJSON(requestURL, function(data){
$.each(data, function(key, innerList) {
$.each(innerList, function(key, value) {
var div = $('<div>');
div.text(`${value.count} ${value.countTxt}`);
$('body').append(div);
console.log(value);
});
});
});
请注意,作为最佳实践,您应该确保
getJSON
也能处理 API 调用失败的情况。正如所写,整个代码块将被简单地跳过,不会向用户提供明显的指示。
致赏金提供者:请随时要求进一步澄清!