How to traverse a JSON file using TypeScript within an Angular application?

Question

How to traverse a JSON file using TypeScript within an Angular application?

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

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

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

This snippet represents a JSON file structure.

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

The code above is from an HTML document.

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

The TypeScript script snippet above shows an error that needs to be resolved.

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

How can we correctly iterate through the JSON object in TypeScript within Angular and import the file properly into the TypeScript file?

json angular typescript

Answer 1

Answer №1

If you're looking to loop through JSON data in Typescript for tasks like pushing information to firebase, one useful library to consider is 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();
   })
  }

For a more detailed explanation, I've written a comprehensive blog post on this topic. Alternatively, if you have a basic JSON object in Typescript and want to display specific values in HTML, you can follow this method:

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() {}

}

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>

Answer 2

If you're looking to loop through JSON data in Typescript for tasks like pushing information to firebase, one useful library to consider is 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();
   })
  }

For a more detailed explanation, I've written a comprehensive blog post on this topic. Alternatively, if you have a basic JSON object in Typescript and want to display specific values in HTML, you can follow this method:

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() {}

}

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>

How to traverse a JSON file using TypeScript within an Angular application?

Answer №1

Similar questions

encountered premature completion of hasBytesAvailable

"Receiving an error message stating 'Was expecting 1 parameter, received 2' while trying to pass a useState function in TypeScript

Access the name property from the package.json file using a bash script

Transitioning an NX environment to integrate ESM

Using JavaScript, pass an array containing a list of JSON values

Supabase guidelines for utilizing getServerSideProps in Next.js

I am encountering an issue regarding the 'endpoint' property within my environment.ts file while working on an Angular 17 project

Error: The module 'fs' could not be located after running Rollup

Which data structure is suitable for storing a JSON object?

Using a for loop in Flot to display data from a JSON file

An Error with jQuery Autocomplete: "Callback is not Defined"

What is the most efficient way to add an element to a list in a JSON structure?

Error: An unexpected character was encountered while trying to parse the object

Submitting a nested object to a Spring MVC controller through JSON format

Save JSON files within Hyperledger Fabric

Generating Legible JavaScript Code from TypeScript

Drawer in Material-UI has whitespace remaining at the corners due to its rounded edges

json not cooperating with ajax, but operates smoothly when utilized independently

"Efficiently Distributing HTTP Requests Among Simultaneous Observers using RxJS

To handle the input field efficiently in Angular, consider utilizing two <input type="radio"> elements