0

I want to update my JSON file which I have placed in my assets folder, so If I am updating just one property of my JSON object so it should update that property only, without affecting any other properties value:

Let the sample code be :

loginInterface.ts

export interface loginModel {
    Email: string;
    Password: string;
}

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http'
import { loginModel } from './loginModel'

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


  private _jsonURL = 'assets/Login.json';
  private login: Array<loginModel>;

constructor(
    private http: HttpClient) {
    this.login = new Array<loginModel>();
  }
ngOnInit() {
    this.getLoginData();
  }

  getLoginData() {
    this.http.get<loginModel[]>(this._jsonURL).subscribe(data => {
      this.login = data;
      console.log(this.login);
      return this.login;
    });
  }

UpdateLoginData() {
// How to proceed on this one??
  }
}

login.component.html

<div *ngFor = "let log of login">
    {{log.Email}} 
    <input [ngModel]="log.Password">
</div>
<button (click)="UpdateLoginData()">Update</button>

This is just an example.

So if I am changing password at one place and clicking on update button , then it should update password of that specific Email only and I don't want to replace the whole file with new JSON object just for updating a single value, is this possible?

halfer
  • 19,824
  • 17
  • 99
  • 186
Shailesh Prajapati
  • 458
  • 2
  • 7
  • 20

4 Answers4

1

You can't do any file operation using just angular framework. You need server side implementation to achieve this. If you are not familiar with server side programming you can try using in memory angular database api.

https://www.npmjs.com/package/angular-in-memory-web-api

prathameshk73
  • 1,048
  • 1
  • 5
  • 16
  • Can you let me know whether I can use this plugin only for development. Will it cause any trouble if I use in production? – Darshana Sep 18 '20 at 06:53
  • @Darshana Sure you can use this plugin for development. But remember if you are using it for production your database will not be secure and you can't store large dataset into this in memory web api. In memory web api is just to simulate the backend REST API. – prathameshk73 Sep 18 '20 at 07:05
0

You can't change the content of JSON file directly through angular, you need the Backend in order to reflect the change on that JSON file.

Ihab Salem
  • 83
  • 5
0

No! You cannot change a file’s content using Angular. It is a file I/O operation that is handled by a backend framework/language (for example Node.JS) having file system API. You can create a RESTful API to modify the contents of the file and make an HTTP call from Angular.

amanpurohit
  • 1,246
  • 11
  • 19
  • @aamanpurohit Can you please let me know how to create dynamic content file using node.js? – Darshana Sep 12 '20 at 10:57
  • @Darshana This thread will be useful for you https://stackoverflow.com/questions/17645478/node-js-how-to-read-a-file-and-then-write-the-same-file-with-two-separate-functi/47889716 – amanpurohit Sep 12 '20 at 18:50
  • @aamanpurohit Thank you for the reply. Sorry for the inconvenience, but can you let me know how to load this dynamic data into angular local file at runtime using http call? – Darshana Sep 13 '20 at 11:54
  • @Darshana you can load the file like this: `return this.http.get('/path/to/file.json')` – LeanKhan Jan 22 '22 at 17:25
0

In json server you can update using put method

//somewhat like given below

this.http.put(this._jsonURL+this.login[0].id,this.login[0]).subscribe();

Akshay
  • 1