How to read json objects from a local json file in angular 8+

Question

For example, I have a json file, "users.json" in below format:

{
  "Users": [
    {
      "name": "Tom"
    },
    {
      "name": "Jim"
    },
    {
      "name": "Julie"
    }
  ]
}

So far, I am able to import UserList from 'users.json' by following this step

I am learning Angular and had no experience in js before. I am stuck how to write the js/ts in angular to declare objects and loop through it in a component. Eventually, I would add these users info to API.

export class addUser OnInit {
  
  # declare user, I am not sure I did right
  users: {name:string} = UserList;

  constructor(
    private APIservice: someAPIservice
  ) {}

  ngOnInit(): void {
    
    ### loop each user, I have no idea now, but give an example
    for (let name in this.users) {
      console.log(users[name])
      ## eventually, I will change code to add each name to APIservice
      ## But I would like to know how to read each name first
    }

What is the best way to read the json file and loop each name in Angular?

Thank you

Kinglish · Accepted Answer · 2021-04-30 19:18:05Z

1

You'll want to use the import command for typescript files, not for data. For data, use HttpClient

import { HttpClient, HttpParams } from '@angular/common/http';
constructor(
        private http: HttpClient
);
ngOnInit(): void {

   this.http.get('../data/users.json').subscribe((users: []) => {
      users.forEach((user: any) => {
        // user.name
      })
   });

}

edited Apr 30, 2021 at 19:18

answered Apr 30, 2021 at 17:22

Kinglish

23.7k4 gold badges25 silver badges43 bronze badges

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

3 Comments

achai Over a year ago

Hi John, Thank you for your answers. However, I got this error GET http://localhost:4200/users.json 404 (Not Found) and I am pretty sure I give right location of json file.

Kinglish Over a year ago

if you're getting a 404 that means you don't have the right location of the json file. Starting the the src directory, where is the data file?

Kinglish Over a year ago

Also I mod'd my answer - Im pretty sure users.json will import as a ready to go json format, so I removed the JSON.parse() line.

Collectives™ on Stack Overflow

How to read json objects from a local json file in angular 8+

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related