Write on JSON file and display the same on component in Angular

Question

project with 4 components 1. Login 2. Home(to view minute detail of Employee) 3. View(to show complete Details of Employee) and 4. Edit. Am already able to read Employee Details from .json file and display on the View in Detail component and View Component.

Now I want to change the details available in JSON file and display the same on View and ViewinDetail components.

My Employee.json is as follows:

[
    {
        "id": 1,
        "firstName": "Abhi",
        "lastName": "A B",
        "gender": "male",
        "age": 25,
        "email": "Abhi@gmail.com",
        "phoneNumber": 8888888888,
        "department": "IT",
        "address": "Bengaluru"
    },
    {
        "id": 2,
        "firstName": "Amogh",
        "lastName": "A M",
        "gender": "male",
        "age": 25,
        "email": "Amogh@gmail.com",
        "phoneNumber": 8888888888,
        "department": "IT",
        "address": "Bengaluru"
    },
    {
        "id": 3,
        "firstName": "Harsha",
        "lastName": "H A",
        "gender": "male",
        "age": 25,
        "email": "Harsha@gmail.com",
        "phoneNumber": 8888888888,
        "department": "IT",
        "address": "Bengaluru"
    }
]

My home.html is as follows:

Welcome Home



        
                {{employee.firstName}} {{employee.lastName}}
        
        
                
                        
                                
                                        
                                                
                                                        First Name
                                                
                                                
                                                        : {{employee.firstName}}
                                                
                                        
                                        
                                                
                                                        Last Name
                                                
                                                
                                                        : {{employee.lastName}}
                                                
                                        
                                        
                                                
                                                        Gender
                                                
                                                
                                                        : {{employee.gender}}
                                                
                                        
                                        
                                                
                                                        Department
                                                
                                                
                                                        : {{employee.department}}

My home.ts is as follows:

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import employees from '../employeeDetails/employees.json';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor(private router: Router) { }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;
  // tslint:disable-next-line: use-lifecycle-interface
  ngOnInit(): void { }

  viewEmployee(id): any {
    this.router.navigateByUrl(`/view/${id}`);
  }

  editEmployee(i): any {
    this.router.navigateByUrl('/edit');
  }
}

My view.html is as follows:

View Page



  
    {{employee.firstName}} {{employee.lastName}}
  
  
    
      
        
          
            
              First Name
            
            
              : {{employee.firstName}}
            
          
          
            
              Last Name
            
            
              : {{employee.lastName}}
            
          
          
            
              Gender
            
            
              : {{employee.gender}}
            
          
          
            
              Age
            
            
              : {{employee.age}}
            
          
          
            
              Email
            
            
              : {{employee.email}}
            
          
          
            
              Phone Number
            
            
              : {{employee.phoneNumber}}
            
          
          
            
              Department
            
            
              : {{employee.department}}

My view.ts is as follows:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import employees from '../employeeDetails/employees.json';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
  constructor(private router: Router, private route: ActivatedRoute) { }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;
  employee;
  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      const employeeId = params.id;
      this.employee = employees.filter((e) => e.id === +employeeId)[0];
    });
  }
  editEmployee(): any {
    this.router.navigateByUrl('/edit');
  }
}

My edit.html is as follws:

Edit Page

    
        
            First Name
            
        
        
            LastName
            
        
        

            Gender : 
                  
                    Male
   
                
                    Female
            


        
        
            Age
            
        
        
            Email
            
        
        
            Phone Number
            
        
        
            Address

My edit.ts is as follows:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import employees from '../employeeDetails/employees.json';

@Component({
  selector: 'app-edit',
  templateUrl: './edit.component.html',
  styleUrls: ['./edit.component.css']
})
export class EditComponent implements OnInit {

  constructor(private router: Router, private route: ActivatedRoute) { }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;

  ngOnInit(): void {
  }
  editDetails(): any {
    this.router.navigateByUrl('/edit');
  }
}

Please help, I don't have much idea how to proceed. I thought of editing the .json file but didn't know how to do it. Any other methods are also acceptable.

user_3092377 · Answer

You can't write into JSON file which you are storing in the project just by typescript.

I am assuming that you want to replicate a server and that's why you have stored a json locally and fetching the value in component.

To write to such JSON file, you need install something like json-server and then make a POST call to the localhost server. That should give you the expected behavior.

To fetch the json data, you'll need make a GET call to the same localhost server

As mentioned in the comment, if you want to use sesssionStorage, you can simply save the json into the ParentComponent as

constructor(){
  sessionStorage.setItem('empList',employees);
}

then to use it OtherComponents, you can do:

ngOnInit(){
  const data = JSON.parse(sessionStorage.getItem('empList'));
  if (!!data){
     // there is no data in sessionStorage
  }
}

Write on JSON file and display the same on component in Angular

1 Answers