Get data from .json file in angular

Question

I'm building an app in angular 9 and I have a .json file to get data and I want to get first element.

I tried it from take(1), first and single() but none worked.

How can we fetch data from JSON file?

JSON

[
  {
    "username": "test",
    "password": "test",
    "firstName": "User",
    "lastName": "Test"
  },
  {
    "username": "test1",
    "password": "test1",
    "firstName": "User1",
    "lastName": "Test1"
  }
]

Component.ts

this.authenticationService.login()
    .pipe(first())
    .subscribe(
      data => {
      console.log(data)
        if(this.loginModel.username == data.username && this.loginModel.password == data.password){
          localStorage.setItem('currentUser', JSON.stringify(data));
          this.router.navigate([this.returnUrl]);
        }
        else{
          // this.error = error;
          // this.loading = false;
          alert('Please enter correct USERNAME OR PASSWORD');
        }
      },
      error => {
        this.error = error;
        this.loading = false;
      }
    );

Is the json file in your assets folder? Or where are you reading it from? — Mohamad Mousheimish, Mar 06 '20 at 06:47
Check this https://stackoverflow.com/questions/47206924/angular-5-service-to-read-local-json-file — Sanjay Lohar, Mar 06 '20 at 06:52
could you please put the result of console.log(data) in your question? — Mohammad Niazmand, Mar 06 '20 at 06:57
(2) [{…}, {…}]0: username: "test"password: "test"firstName: "User"lastName: "Test"__proto__: Object1: username: "test1"password: "test1"firstName: "User1"lastName: "Test1"__proto__: Objectlength: 2__proto__: Array(0) — Coding test, Mar 06 '20 at 07:01
If the data variable has the json file data, you can easily access to first object by data[0] or data[1] — Mohammad Niazmand, Mar 06 '20 at 07:01
yes, I can do it but how to do this by using rxjs methods like take or first — Coding test, Mar 06 '20 at 07:02

score 3 · Accepted Answer · answered Mar 06 '20 at 07:02

Since your json file is in your assets folder, you can import it and use it as an object.

Here's what I do normally:

JSON File

{
   "LayerIds": [0, 1, 2, 3, 4, 5, 7, 8, 11, 20, 21, 22, 23],
   "HiddenLayerIds": [3, 7, 11, 21, 20, 23],
   "DefinitionExpressionColumn": "vertical_order",
   "LevelId": 7,
   "LevelFilterOutFields": "vertical_order, name",
   "SelectedLayerId": 2,
   "LevelDictionary": ["vertical_order", "name"],
   "PathwaysLayerId": 22,
   "GeometryServiceAreaUnit": "square-feet",
   "GeometryServiceLengthUnit": "feet"
}

Service.ts

 import myJson from '../../../assets/json/config.json';

 readConfigFile() {
   return myJson;
 }

Component.ts

ngOnInit() {
   this.mainConfiguration = this.service.readConfigFile();

   // This will print "feet" to the console
   console.log(this.mainConfiguration.GeometryServiceLengthUnit);
}

You can skip the service step and import the json file directly into your component. But since you're using it as an object I think your json file should be like this:

{
 "Users": [
   {
     "username": "test",
     "password": "test",
     "firstName": "User",
     "lastName": "Test"
   },
   {
     "username": "test1",
     "password": "test1",
     "firstName": "User1",
     "lastName": "Test1"
   }]
}

In this way when you import the json file. Try Console.log(importedjson.Users); to see your data.

NOTE: If you built your application and got the following error:

Cannot find module ‘../../assets/SampleJson.json’. Consider using ‘–resolveJsonModule’ to import module with ‘.json’ extension

To remove the above error, in tsconfig.json file under compiler options we need to add resolveJsonModule and esModuleInterop configurations as true as shown below.

{  "compilerOptions": {  "resolveJsonModule": true, "esModuleInterop": true }}

Get data from .json file in angular

1 Answers1