如何从json中的数组中获取数据？答案

【问题标题】：how to get data from an array in a json?如何从json中的数组中获取数据？
【发布时间】：2021-03-03 13:40:58
【问题描述】：

如何从这个 json 中获取信息以 10 角绘制它们

{
  "countries": [
    {
      "id": 1,
      "name": "United States"
    },
    {
      "id": 2,
      "name": "India"
    }
 
  ],
  "states": [
    {
      "id": 1,
      "countryId": 1,
      "name": "Alabama"
    },
    {
      "id": 2,
      "countryId": 1,
      "name": "Alaska"
    }
  ]
}

对于普通的 json，我使用了这个，但是那个 jeson 有 2 个数组，它不会让我

return this.http.get<Country[]>("./assets/data.json");

尝试区分“[object Object]”时出错。只允许使用数组和可迭代对象

<!-- html -->
<div  *ngFor="let item of countri">
  {{item.id}}
</div>

型号

export interface Country {
  id: number;
  name: string;
}

和我的订阅

countri: Country[] = [];

  this.countriesService.getCountries().subscribe(
      countri => {
        this.countri = countri;
        console.log(countri);
      },
      err => console.log(err)
       );

【问题讨论】：

任何答案对您有用吗？如果是，请考虑接受/支持他们。 What should I do when someone answers my question?

标签： arrays json angular dictionary object

【解决方案1】：

正如错误提示的那样，您很可能尝试迭代对象而不是数组。此外，由于您获取的数据是异步，您可以使用以下代码来避免任何错误。它使用 async 管道和 safe(?) 操作符。

.ts

jsonData;

ngOnInit() {
   this.jsonData = this.http.get('./assets/data.json');
}

模板

<div *ngFor="let country of (jsonData | async)?.countries">
    {{ country | json}}
</div>

<div *ngFor="let state of (jsonData | async)?.states">
    {{ state | json}}
</div>

【讨论】：

【解决方案2】：

Error trying to diff '[object Object]'. Only arrays and iterables are allowed ，当您尝试使用 Object 而不是 Array 迭代 ngFor 时，通常会出现此错误。

如果你使用的是 ngFor，

list.component.ts

data={
  "countries": [
    {
      "id": 1,
      "name": "United States"
    },
    {
      "id": 2,
      "name": "India"
    }

  ],
  "states": [
    {
      "id": 1,
      "countryId": 1,
      "name": "Alabama"
    },
    {
      "id": 2,
      "countryId": 1,
      "name": "Alaska"
    }
  ]
}

list.component.html

<ul>
    <li *ngFor="let item of data.countries">
        {{item.name}}
    </li>
</ul>

或

<ul>
  <li *ngFor="let item of data.states">
           {{item.name}}
  </li>

【讨论】：

数据是异步获取的，所以上面的方案会破坏模板。
@Tony - 您需要在模板中使用异步管道。

【解决方案3】：

使用any。
第一种方式：

return this.http.get<any>("./assets/data.json");

第二种方式为您的数据定义一个适当的interface。

export interface IRequest {
 countries: ICourtry[],
 states: IState[]
}

export interface ICourtry{
 id:number;
 name: string;
}

export interface IState{
 id:number;
 name: string;
 countryId: number;
}

return this.http.get<IRequest>("./assets/data.json");

这个提到的错误（Error trying to diff '[object Object]'）是因为你在模板的某个地方使用了这个 json，但它没有值。希望它会修复它或提供模板代码。

【讨论】：