Javascript 如何解析 JSON 数组

IT技术 javascript json extjs
2021-01-22 22:20:47

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

我究竟做错了什么 ？谢谢！

6个回答

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方法在旧的旧浏览器中不起作用 - 因此，如果您打算通过某种时间弯曲互联网连接使您的网站可用，这可能是一个问题！如果你真的有兴趣，这里有一个支持图表（它勾选了我所有的框）。

如果他使用支持跨浏览器 parseJSON 函数的库，他应该使用它。此外，您重复循环错误。
2021-03-21 22:20:47
@nights：这很可能是您的 JSON 字符串无效，然后尝试使用在线 JSON 验证工具，例如这个
2021-04-08 22:20:47
运行此命令时，第一行出现错误：Uncaught SyntaxError: Unexpected token o
2021-04-11 22:20:47

这是我的回答：

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

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

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

与服务器数据交互的“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在这个例子中（也可以在这个 fiddle 中找到）包含你的数据。idProperty: 'counter_name'在这种情况下可能是可选的，但通常指向主键属性。rootProperty: 'counters'指定哪个属性包含数据项数组。

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

对我来说更重要的事情..

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

其它你可能感兴趣的问题
上一篇如何在类似于 PHP 的 preg_match_all() 的 JavaScript 中使用正则表达式匹配多次出现？ 下一篇为什么对同一个 ASP.NET MVC 操作的多个同时 AJAX 调用会导致浏览器阻塞？