Javascript如何解析JSON数组答案

【问题标题】：Javascript how to parse JSON arrayJavascript如何解析JSON数组
【发布时间】：2012-04-17 00:30:13
【问题描述】：

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

我做错了什么？谢谢！

【问题讨论】：

Safely turning a JSON string into an object的可能重复

标签： javascript json extjs

【解决方案1】：

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);
}

Here is a working example

编辑：你在使用 for 循环时有一个错误（我在第一次阅读时错过了这个，感谢@Evert 的现场）。使用 for-in 循环会将 var 设置为当前循环的属性名称，而不是实际数据。请参阅上面我更新的循环以了解正确用法

重要提示：JSON.parse 方法不适用于旧的旧浏览器 - 因此，如果您打算通过某种时间弯曲的互联网连接使您的网站可用，这可能是个问题！如果你真的有兴趣，here is a support chart（我的所有方框都打勾）。

【讨论】：

如果他使用支持跨浏览器 parseJSON 函数的库，他应该使用它。此外，您重复循环错误。
我在第一行运行时出现错误：Uncaught SyntaxError: Unexpected token o
@nights：那很可能是您的 JSON 字符串无效，请尝试使用在线 JSON 验证工具，like this one

【解决方案2】：

在 for-in-loop 中，运行变量保存属性名称，而不是属性值。

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);
}

【讨论】：

【解决方案3】：

这是我的回答：

<!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>

【讨论】：

【解决方案4】：

用于与服务器数据交互的“Sencha 方式”是设置一个由Ext.data.proxy.Proxy 代理的Ext.data.Store（在这种情况下为Ext.data.proxy.Ajax）配备一个Ext.data.reader.Json（对于JSON 编码的数据，还有其他阅读器也可用）。对于将数据写回服务器，有多种Ext.data.writer.Writers。

这是一个这样的设置示例：

    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 组件，例如网格、列表或表单。

【讨论】：

【解决方案5】：

对我来说更重要的一点..

var jsontext = '{"firstname":"Jesper","surname":"Aaberg","phone":["555-0100","555-0120"]}';  
var contact = JSON.parse(jsontext);  
document.write(contact.surname + ", " + contact.firstname);  
document.write(contact.phone[1]);  
// Output:  
// Aaberg, Jesper  
// 555-0100

参考： https://docs.microsoft.com/en-us/scripting/javascript/reference/json-parse-function-javascript

【讨论】：

【解决方案6】：

这就像魅力！

所以我根据我的要求编辑了代码。以下是变化：它会将响应中的 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);
}

【讨论】：

【解决方案7】：

票数较高的答案有误。当我使用它时，我在第 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);
}

【讨论】：

也许你的意思是 can 你说 should。但是，如果您在代码中添加更多详细信息/解释会更好，这将更好地帮助 OP 和其他有相同问题的人。
您也可以稍微解释一下为什么选择这种方法，以便用户了解更多。这将有助于改进这个答案。
投票最多的答案回答了这个问题，但是当我使用它时，我明白它在第 4 行是错误的： var counter = jsonData.counters[i];但我将其更改为： var counter = jsonData[i].counters;它奏效了。所以我说可以而不是应该。

【解决方案8】：

提醒一下……

var data = JSON.parse(responseBody);

一直是deprecated。

邮递员学习中心now建议

var jsonData = pm.response.json();

【讨论】：

【解决方案9】：

您应该在 ExtJs 中使用数据存储和代理。其中examples 很多，JSON 阅读器会自动将 JSON 消息解析为您指定的模型。

在使用 ExtJs 时不需要使用基本的 Javascript，一切都不一样，你应该使用 ExtJs 的方式来正确处理一切。仔细阅读那里的文档，很好。

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

【讨论】：

【解决方案10】：

不确定我的数据是否完全匹配，但我有一个 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()+"]")

【讨论】：