Question

如何从JSON文件中获取信息以在Angular项目中进行迭代？

我想从JSON文件导入信息。我不知道如何将JSON文件包含到数组中。

我希望显示"Abbey", "Abbeyard", "Abbeywood" ....等单词。

我的JSON文件与组件位于同一目录中。

这是我的JSON 代码

[
  {
    "ABBA RIVER": "ABBEY",
  },
  {
    "ABBA RIVER": "ABBEYARD",
  },
  {
    "ABBA RIVER": "ABBEYWOOD",
  }

...

Answer 1

请认真阅读Angular - Displaying Data

在您的组件中：

export class AppComponent {
  abbas = [{
    "ABBA RIVER": "ABBEY",
  },
  {
    "ABBA RIVER": "ABBEYARD",
  },
  {
    "ABBA RIVER": "ABBEYWOOD",
  }];
}

在您的模板中：

<ul>
   <li *ngFor="let abba of abbas">
      {{ abba["ABBA RIVER"] }}
   </li>
</ul>

要从文件获取JSON：

Angular 5 Service to read local .json file

Answer 2

我同意CruelEngine。您可以使用任何版本的angular编写普通的javascript代码。因此，我为您提供了一个代码，在其中循环遍历Json并获取所需的数据。

var _shapes=ObjectToBeConvertedIntoJson;
if ((_shapes != undefined)) {

    var shapesJsonData = JSON.parse(_shapes);
    for (var keyAttr in shapesJsonData) {
        var valDataRow = shapesJsonData[keyAttr];
        var attrs = valDataRow.attrs;
}
}

Angular中JSON的基本用法

2 个答案: