how to fetch data from JSON file and display on webpage

Question

in angular Our application access JSON file which is stored on server side. That JSON file contains information of students. After button press we have to fetch data from JSON file and display on web page

Where's the code? How are we supposed to help you if you don't post what you've done so far? — Jacopo Sciampi, Jul 06 '18 at 16:34

score 0 · Answer 1 · answered Jul 06 '18 at 22:16

You could use the Http service to make an API call to your local env, and pointing to your JSON file, you could read it with an observable. Using something like this code:

@Injectable()
export class AppServices{

    constructor(private http: Http) {
         var obj;
         this.getJSON().subscribe(data => obj=data, error => console.log(error));
    }

    public getJSON(): Observable<any> {
         return this.http.get("./file.json")
                         .map((res:any) => res.json())
                         .catch((error:any) => console.log(error));

     }
}

You could read more here:
Angular4: how do access local json?

score -1 · Answer 2 · answered Jul 06 '18 at 16:35

As you are using Angular application, you can make an HTTP request to your server and the server would return you the required JSON response.

Once you get hold of the JSON, you may then set that on a variable in your .ts file and depending whether it is an array or just an object, you may use it accordingly using *ngFor or by just using the object directly.

For more information, please refer to the Angular tutorial:-

https://angular.io/tutorial/toh-pt6

how to fetch data from JSON file and display on webpage

2 Answers2