Basic use of JSON in Angular

Question

How do I get the information from a JSON file to iterate in my Angular project?

I want to import the information from my JSON file. I do not know how to include the JSON file into an array.

I want the words "Abbey", "Abbeyard", "Abbeywood".... and so on to show up.

I have my JSON file in the same directory as my component.

Here is my JSON code

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

...

its a simple array of Objects . You can loop through and access each object using the key 'ABBA RIVER' — CruelEngine, Jun 28 '18 at 05:46
This is a very basic question ;) Read up on `*ngFor`: https://angular.io/guide/displaying-data if you are talking about template. — AT82, Jun 28 '18 at 05:47
Check https://stackoverflow.com/a/47207063/2871326 if you wish to load json file — Raxit, Jun 28 '18 at 05:54
I think this is the solution that I am looking for. Thank you. — Caleb Grams, Jun 28 '18 at 05:56

gotnull · Answer 1 · 2018-06-28T06:07:33.610

1

Have a good read of Angular - Displaying Data

In your Component:

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

In your Template:

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

To get the JSON from a file:

Angular 5 Service to read local .json file

edited Jun 28 '18 at 06:07

answered Jun 28 '18 at 05:55

gotnull

26,454
22
137
203

score -1 · Answer 2 · answered Jun 28 '18 at 05:57

I agree with CruelEngine. You can write plain javascript code in any version of angular. Therefore I am providing you a code where I am looping through Json and fetching the data that I need.

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

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

Basic use of JSON in Angular

2 Answers2