访问没有名称的json对象

问题描述 投票：0回答：2

我正在努力访问下面的 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 中。我尝试了十种不同的变体，但没有任何效果。请帮忙！？

jquery ajax json getjson
2个回答
1
投票

您只需要在第一次迭代中再迭代一次。您有一个包含对象数组的数组。所以尝试这样的事情

http://jsfiddle.net/mnth1xe1/5/

$.each(data, function(key, val) {
    $.each(val, function(key, value) {

        console.log(value.countTxt);
    });

});
0
投票

很抱歉复活了一个古老的问题，但是，好吧，有赏金！ 🙂

提问者混淆了对象和数组。对象由大括号 (

{...}
) 包围，而数组则使用方括号 (
[...]
)。

一个对象具有命名元素，如示例所示：

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 调用失败的情况。正如所写，整个代码块将被简单地跳过，不会向用户提供明显的指示。

致赏金提供者：请随时要求进一步澄清！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.