Javascript如何解析JSON数组


92

我正在使用Sencha Touch(ExtJS)从服务器获取JSON消息。我收到的消息就是这个:

{
"success": true,
"counters": [
    {
        "counter_name": "dsd",
        "counter_type": "sds",
        "counter_unit": "sds"
    },
    {
        "counter_name": "gdg",
        "counter_type": "dfd",
        "counter_unit": "ds"
    },
    {
        "counter_name": "sdsData",
        "counter_type": "sds",
        "counter_unit": "   dd       "
    },
    {
        "counter_name": "Stoc final",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "Consum GPL",
        "counter_type": "number    ",
        "counter_unit": "litri     "
    },
    {
        "counter_name": "sdg",
        "counter_type": "dfg",
        "counter_unit": "gfgd"
    },
    {
        "counter_name": "dfgd",
        "counter_type": "fgf",
        "counter_unit": "liggtggggri     "
    },
    {
        "counter_name": "fgd",
        "counter_type": "dfg",
        "counter_unit": "kwfgf       "
    },
    {
        "counter_name": "dfg",
        "counter_type": "dfg",
        "counter_unit": "dg"
    },
    {
        "counter_name": "gd",
        "counter_type": "dfg",
        "counter_unit": "dfg"
    }

    ]
}

我的问题是我无法解析此JSON对象,因此我可以使用每个计数器对象。

我正在尝试像这样完成:

var jsonData = Ext.util.JSON.decode(myMessage);
for (var counter in jsonData.counters) {
     console.log(counter.counter_name);
 }

我究竟做错了什么 ?谢谢!


Answers:


140

Javascript具有针对字符串的内置JSON解析,我想这就是您拥有的:

var myObject = JSON.parse("my json string");

在您的示例中使用此代码将是:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

这是一个有效的例子

编辑:您在使用for循环时出错(我在第一次阅读时就错过了这一点,请记入@Evert位置)。使用for-in循环会将var设置为当前循环的属性名称,而不是实际数据。请参阅上面的更新循环以了解正确用法

重要提示:该JSON.parse方法在旧的旧浏览器中不起作用-因此,如果您打算通过某种时间弯曲的互联网连接来使网站可用,则可能会出现问题!但是,如果您真的有兴趣,可以在下面的支持表中打勾。


1
如果他使用的库支持跨浏览器的parseJSON函数,则应使用该库。此外,您重复循环错误。
Bergi'4

我得到的第一行一个错误,当我运行此:未捕获的SyntaxError:意外的标记Ø

@nights:这是最有可能的是你有一个无效的JSON字符串,然后,尝试在线JSON验证工具,像这样的
musefan

8

这是我的答案

<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p>
First Name: <span id="fname"></span><br> 
Last Name: <span id="lname"></span><br> 
</p> 
<script>
var txt = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

//var jsonData = eval ("(" + txt + ")");
var jsonData = JSON.parse(txt);
for (var i = 0; i < jsonData.employees.length; i++) {
    var counter = jsonData.employees[i];
    //console.log(counter.counter_name);
    alert(counter.firstName);
}

</script>
</body>
</html>

6

在循环中,运行变量保存属性名称,而不是属性值。

for (var counter in jsonData.counters) {
    console.log(jsonData.counters[counter].counter_name);
}

但是由于计数器是一个数组,因此必须使用常规的for循环:

for (var i=0; i<jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}

1

与服务器数据进行交互的“ Sencha方式”是设置一个Ext.data.Store代理服务器Ext.data.proxy.Proxy(在本例中为代理),该代理服务器Ext.data.proxy.Ajax配有Ext.data.reader.Json(对于JSON编码的数据,也可以使用其他阅读器)。为了将数据写回服务器,有Ext.data.writer.Writer几种。

这是类似设置的示例:

    var store = Ext.create('Ext.data.Store', {
        fields: [
            'counter_name',
            'counter_type',
            'counter_unit'
        ],

        proxy: {
            type: 'ajax',
            url: 'data1.json',

            reader: {
                type: 'json',
                idProperty: 'counter_name',
                rootProperty: 'counters'
            }
        }
    });

data1.json在此示例中(也可在该提琴中使用)包含您的数据原样。idProperty: 'counter_name'在这种情况下可能是可选的,但通常指向主键属性。rootProperty: 'counters'指定哪个属性包含数据项数组。

通过这种存储设置,您可以通过调用从服务器重新读取数据store.load()。您还可以将商店连接到任何Sencha Touch合适的UI组件,例如网格,列表或表单。



0

这就像魅力!

因此,我根据需要编辑了代码。更改如下:它将响应中的ID号保存到环境变量中。

var jsonData = JSON.parse(responseBody);
for (var i = 0; i < jsonData.data.length; i++)
{
    var counter = jsonData.data[i];
    postman.setEnvironmentVariable("schID", counter.id);
}

0

投票率较高的答案有误。当我使用它时,我在第3行中找到了它:

var counter = jsonData.counters[i];

我将其更改为:

var counter = jsonData[i].counters;

它为我工作。第3行中的其他答案有所不同:

var jsonData = JSON.parse(myMessage);
for (var i = 0; i < jsonData.counters.length; i++) {
    var counter = jsonData[i].counters;
    console.log(counter.counter_name);
}

1
也许你的意思是可以,你说应该。但是,最好在代码中添加更多详细信息/说明,这样可以更好地帮助OP和其他有相同问题的人。
Tiw

您还可以解释一下为什么选择此方法,以便用户学到更多。那将有助于改善这个答案。
TsTeaTime '19

投票最多的答案回答了这个问题,但是当我使用它时,它理解第4行是错误的:var counter = jsonData.counters [i]; 但我将其更改为:var counter = jsonData [i] .counters; 而且有效。所以我说可以而不是应该。
马赫迪贾拉利

0

只是抬起头来...

var data = JSON.parse(responseBody);

弃用

邮差学习中心现在建议

var jsonData = pm.response.json();

-1

您应该在ExtJs中使用数据存储和代理。有很多这样的示例,并且JSON阅读器会自动将JSON消息解析为您指定的模型。

使用ExtJ时无需使用基本Javascript,所有内容都不同,您应该使用ExtJs方法来使所有内容正确。仔细阅读那里的文档,很好。

顺便说一下,这些示例也适用于Sencha Touch(尤其是v2),它基于与ExtJ相同的核心功能。


-1

不知道我的数据是否完全匹配,但是我有一个JSON对象数组,当使用页面时会从jQuery FormBuilder中导出该数组。

希望我的答案可以帮助任何偶然发现该问题的人寻找与我所遇到的问题类似的答案。

数据看起来像这样:

var allData = 
[
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ],
    [
        {
            "type":"text",
            "label":"Text Field"
        }, 
        {
            "type":"text",
            "label":"Text Field"
        }
    ]
]

我所做的解析只是执行以下操作:

JSON.parse("["+allData.toString()+"]")
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.