Get Data from JSON File in Angular and Bootstrap

In this article, we will discuss how to retrieve data from a JSON file in an Angular project that is styled using Bootstrap.

Setting up the Project

Before we begin, make sure you have Node.js installed on your system. You can create a new Angular project by running the following commands:


$ npm install -g @angular/cli
$ ng new my-angular-project


Creating a JSON File

Create a new file named data.json in the src/assets folder of your Angular project. Populate this file with some sample data:

{
    "users": [
        {"id": 1, "name": "John Doe"},
        {"id": 2, "name": "Jane Smith"},
        {"id": 3, "name": "Bob Johnson"}
    ]
}
    

Reading JSON Data in Angular

Next, create a service in your Angular project to read the JSON data. We will use the HttpClient module to make an HTTP request to the JSON file:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class DataService {

    constructor(private http: HttpClient) { }

    getData() {
        return this.http.get('/assets/data.json');
    }

}
    

Displaying Data in a Component

Now, create a component in your Angular project to display the JSON data. You can use Bootstrap to style the layout of your component:

    

        

            
Users
            

                
{{ user.id }} - {{ user.name }}
            
        
    

    

Conclusion

By following the steps outlined in this article, you can easily retrieve data from a JSON file in an Angular project that is styled using Bootstrap. This approach is particularly useful for building real-time projects that require dynamic data manipulation.