时间戳

首页 > 解决方案 > 循环遍历 JSON 键和值

json - 循环遍历 JSON 键和值

问题描述

看起来很简单，但有些我无法像我想要的那样循环遍历这些项目

我有这个 json 对象

"meters":{  
      "Rozvadec M11":{  
         "0":{  
            "Name":"m11-mcu13_sm114",
            "Title":"Svarovaci centrum Flexarc",
            "Parent":"m11-mcu13",
            "Status":"Running",
            "State":false
         },
         "1":{  
            "Name":"m11-mcu13_sm115",
            "Title":"Brousici centrum Solicad",
            "Parent":"m11-mcu13",
            "Status":"Running",
            "State":false
         }
      },
      "Rozvadec R1-L":{  
         "0":{  
            "Name":"r1-l-mcu1_sm100",
            "Title":"Amada NCT1",
            "Parent":"r1-l-mcu1",
            "Status":"Device unavailable",
            "State":false
         },
         "1":{  
            "Name":"r1-l-mcu1_sm101",
            "Title":"Amada 1",
            "Parent":"r1-l-mcu1",
            "Status":"Device unavailable",
            "State":false
         },
         "2":{  
            "Name":"r1-l-mcu1_sm102",
            "Title":"Amada 2",
            "Parent":"r1-l-mcu1",
            "Status":"Device unavailable",
            "State":false
         }
      },

我想要做的是遍历所有仪表以获得一个列表

"Rozvadec M11"
"Rozvadec R1-L"

并且在每个下面都有一个不同智能电表名称的列表

我在ts里有这个

let list =  this.http.get('EndpointURL');
         list.subscribe (
           (response: Response)=> 
           {this.meters.push(response);
           console.log(this.meters);
         })

这在 html 中（我试图在嵌套 for 循环之前先只遍历仪表）

<ul *ngFor="let meter of meters">
    <li>{{ meter}}</li>
</ul>

标签： jsonangular6

解决方案

您的大部分代码都是正确的，但 ngFor 并没有以这种方式使用。带有 ngFor 的 html 标签将被重复，这就是为什么您应该在 list 标签中使用它li而不是 list 标签ul。对你来说是这样的：

<ul>
    <li *ngFor="let meter of meters">
        {{meter}}
    </li>
<ul>

这个确切的例子在 docs 中有所介绍。

编辑：如果您想访问列表的键，在这个SO 答案中，您可以看到 Angular6 中检索它的新方法。对于您的示例，它最终会像这样：

<ul>
    <li *ngFor="let meter of meters | keyvalue">
        {{meter.key}}
    </li>
<ul>

您可以keyValuePipe在docs中阅读有关 的更多信息。

推荐阅读