How can i read json file?

Question

I would like to read json file. But, when a read my const, it's empty.. Thanks a lot to your help

import { HttpClientModule, HttpClient } from '@angular/common/http';

@NgModule({
    imports: [
        HttpClientModule
    ]
})

   private url: string= './../../json/config.json';
   constructor(private http: HttpClient) {}

   const aaa = this.http.get(this.url);
   console.log('aaa', aaa)

   console.log === Observable {_isScalar: false, source: Observable, operator: MapOperator}
   operator: MapOperator {project: ƒ, thisArg: undefined}
   source: Observable {_isScalar: false, source: Observable, operator: FilterOperator}
   _isScalar: false
   __proto__: Object

Answer 1

I have consumed json files in my angular projects before. Mostly in spec files but here is an example. You can import (or require) your json file using its path relative to your code file.

import * as testData from './testing/probe.testdata.json';

and then consume the json data using your testData variable. like this:

const obj = (<any>testData);
var myJsonProp = obj.PropertyName;

this works for me, please be aware this eg is in typescript. but js works too. this would replace your call to this.http.get(this.url) good luck!

Answer 2

I use a class like this:

export class State {
    constructor(public id: number, public name: string) { }
}
export class City {
    constructor(public id: number, public name: string, public state) { }
}

export const states: State[] = [
    {
        id: 0,
        name: 'Alabama'
    },
    {
        id: 1,
        name: 'Alaska'
    }
...

Then in components:

import { State, states, City, cities } from '../../shared/classes/us-areas';
...
readonly states: State[] = states;
readonly cities: City[] = cities;

Then I can use the class:

console.log(this.user.cities);
console.log(this.user.states);

For JSON you can simply import the file or subscribe to its endpoint source and output it with Angular's JSON pipe.

<pre>{{newData | json}}</pre>

For serving JSON source data you could create a service and make a Subject which is subscribable from anywhere.

public post<T>(): Observable<any> {
    return this.http.get("https://example.com/config.json");
}