logo标签列表

JavaScript如何解析JSON数组

javascriptjsonextjs
120

我正在使用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);
 }

我做错了什么？谢谢！

1
可能是重复的问题，参考 安全地将 JSON 字符串转换为对象。 - T.Todua
10个回答
172

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循环会将变量设置为当前循环的属性名称，而不是实际数据。请参见我上面更新的循环以获得正确的用法。

重要提示: JSON.parse 方法无法在旧浏览器中工作 - 因此，如果您计划通过某种时间扭曲的互联网连接使您的网站可用，这可能是一个问题！不过，如果您真的感兴趣，这里有一个支持图表（满足我的所有需求）。

1
如果他使用支持跨浏览器parseJSON函数的库，他应该使用它。另外，你重复了循环错误。 - Bergi
当我运行这段代码时，第一行出现了错误： Uncaught SyntaxError: Unexpected token o - nights
@nights：很可能是您有一个无效的JSON字符串，尝试使用在线JSON验证工具，比如这个。 - musefan
8
在for-in循环中，运行变量保存属性名称，而不是属性值。
for (var counter in jsonData.counters) {
    console.log(jsonData.counters[counter].counter_name);
}

但是由于 counters 是一个数组，所以您需要使用普通的 for 循环：

for (var i=0; i<jsonData.counters.length; i++) {
    var counter = jsonData.counters[i];
    console.log(counter.counter_name);
}
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>
这绝对是有效和高效的，谢谢。 - Fopa Léon Constantin
1
提前告知一下，只是提醒一下...
var data = JSON.parse(responseBody);

已经过时，不再推荐使用。

现在，Postman学习中心建议：

var jsonData = pm.response.json();
这是不正确的。不要将邮递员API与JavaScript语言API混淆。 - John Miller
1
1
"Sencha way" 与服务器数据交互的方式是设置一个被 Ext.data.proxy.Proxy (在这种情况下是 Ext.data.proxy.Ajax) 代理的 Ext.data.Store，并提供一个 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（也可在this fiddle中找到）包含了您的数据。在这种情况下，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;

对我来说它起作用了。 第三行与其他答案有所不同：

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
也许你在说“应该”的地方是指“可以”。然而，如果你在代码中添加更多的细节和解释，这将更好地帮助提问者和其他有相同问题的人。 - Til
您还可以简单解释一下为什么选择这种方法，以便用户能够更好地了解。这将有助于改进此答案。 - TsTeaTime
最高票答案回答了这个问题，但当我使用它时，在第4行中发现它是错误的： var counter = jsonData.counters[i]; 但我将其更改为： var counter = jsonData[i].counters; 然后它就起作用了。所以我说“可以”而不是“应该”。 - Mahdi Jalali
-1

在ExtJs中，您应该使用数据存储和代理。有很多示例可以参考，JSON读取器会自动将JSON消息解析为您指定的模型。

使用ExtJs时不需要使用基本的Javascript，一切都是不同的，您应该使用ExtJs的方式来做到一切正确。仔细阅读文档，这很重要。

顺便说一下，这些示例也适用于Sencha Touch（特别是v2），它基于与ExtJs相同的核心功能。

-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()+"]")
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接