Iteration of json file in typescript in angular?

Question

[
        {
            "title": "Marker 1",
            "innercontent": "the Porcelain Factory"
        },
        {

            "title": "Marker 2",
            "innercontent": "The Taj Mahal "

        },
        {
            "title": "Marker 3",
            "innercontent": "Golconda Fort"
        }
]

The above is my json file.

<div *ngFor="let marker of currentmrkr">
      <div>
        {{ marker.title }}
      </div>
      <div>
        {{ marker.innercontent }}
      </div>
    </div>

The above is my html file.

import * as content from './content.json';
marker.addListener("click", () => {for(let item of content){
            if(marker.getTitle() == item.title){
              this.currentmrkr = item;
            }
          }
}

The above is in my typescript file.

This shows an error like -

 core.js:6260 ERROR TypeError: _content_json__WEBPACK_IMPORTED_MODULE_1___namespace is not iterable

How can we iterate through the json object inside the typescript file in angular and how to import the file into typescript?

You iterate the same like you do in js. By using some for loop or forEach. — Paul
– Paul, Commented Jun 14, 2020 at 15:55
Does this answer your question? JSON array from local file to Typescript array in Angular 5 — Paul
– Paul, Commented Jun 14, 2020 at 15:57
yes. After iterating where should i put the values so that i can access them in ngfor because ngfor is for arrays not for objects. — angularnoob
– angularnoob, Commented Jun 14, 2020 at 16:18

Ankit Gupta · Accepted Answer · 2020-06-14 16:03:33Z

-1

If you want to iterate JSON within Typescript logic for let's say pushing data to firebase, you can use library called Lodash

import * as _ from 'lodash';

myfunction(json) {
    return new Promise((resolve) => {
      _.map(json, (e, i) => {
       _.keys(e).map(() => {
        this.afs.collection('library').doc('doc ' + i).set(e);
       })
      })
     resolve();
   })
  }

I have a full blog on this if you need more details. Else if you defined a simple json object in typescript and want to view particular value in HTML you can use the following approach:

import { Component } from "@angular/core";

@Component({
  selector: "app-some-section",
  templateUrl: "./some-section.component.html",
  styleUrls: ["./some-section.component.scss"],
})
export class SomeSectionComponent {
  users = [
    {
      name: "Jacob",
      job: "Analyst",
      city: "California",
    },
    {
      name: "John",
      job: "Founder",
      city: "New York",
    },
  ];

  constructor() {}

}

and then in the HTML template:

<div class="card" *ngFor="let user of users">
    <h3 class="job">{{ user.job }}</h3>
    <h3 class="name">{{ user.name }}</h3>
    <h3 class="city">{{ user.city }}</h3>
</div>

answered Jun 14, 2020 at 16:03

Ankit Gupta

475 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

angularnoob Over a year ago

Thanks your loadash logic is awesome. But i am getting an error u can see the error also.

Ankit Gupta Over a year ago

Thanks @angularnoob, could you please share the details of your error? Maybe I can help.

Collectives™ on Stack Overflow

Iteration of json file in typescript in angular?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related