javascript - Update a single property of local JSON file using put call in Angular 8 - Stack Overflow

admin管理员组

文章数量:1356815

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;
}

loginponent.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './loginponent.html',
  styleUrls: ['./loginponent.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??
  }
}

loginponent.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?

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.ponent.ts

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

@Component({
  selector: 'app-login',
  templateUrl: './login.ponent.html',
  styleUrls: ['./login.ponent.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.ponent.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?

• javascript
• angular
• typescript
• angular-httpclient

Share Improve this question Follow edited Dec 8, 2019 at 14:52 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Dec 8, 2019 at 13:30 Shailesh PrajapatiShailesh Prajapati 63822 gold badges88 silver badges2323 bronze badges 1

• Did you find a way to replace whole file with new JSON object ? – Darshana Commented Sep 12, 2020 at 10:59

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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./package/angular-in-memory-web-api

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.

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.

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();

本文标签： javascriptUpdate a single property of local JSON file using put call in Angular 8Stack Overflow