Pushing json file into a localStorage array - json

Question

I have a task to make CRUD app in angular 8 but I have to push somehow my JSON file into local storage and then be able to add new objects. I made an array of contacts and put some data in there and if someone can help me to put this JSON data in that array of objects, so I can read all my contacts from localStorage.
I have tried to subscribe to contacts and it kinda works but won't add data to a localStorage.
Contacts Service
import { Contact } from '../models/contact';
import { IContact } from '../models/contact';
import { Observable } from 'rxjs/Observable';
import { HttpClient } from '#angular/common/http';
import { Injectable, OnInit } from '#angular/core';
#Injectable({
providedIn: 'root'
})
export class ContactService {
contacts: Array < Contact > = [{
first_name: "Darko",
last_name: "Lesevic",
emails: ["darko1#test.com", "darko2#test.com"],
phones: [123456789, 123456789, 123456789],
photo: ''
}];
constructor(private http: HttpClient) {
//this won't work
// this.getJSON().subscribe(data => {
// this.contacts = data;
// console.log(data);
// });
}
getJSON(): Observable < Contact[] > {
return this.http.get < Contact[] > ("/assets/data/contacts.json");
}
contacts_serialized: any;
contacts_deserialized: any;
localStorageObj() {
this.contacts_serialized = JSON.stringify(this.contacts); //converts data to string
localStorage.setItem('id', this.contacts_serialized);
this.contacts_deserialized = JSON.parse(localStorage.getItem('id')); //converts string to data
console.log(this.contacts_deserialized);
}
}
Calling contact Service here
import { ContactService } from '../services/contact.service';
import { Component, OnInit } from '#angular/core';
import { Observable } from 'rxjs';
import { Contact } from '../models/contact';
#Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
constructor(private contactService: ContactService) { }
ngOnInit() {
this.contactService.localStorageObj();
}
}
MY JSON FILE
[{
"first_name": "Afonso",
"last_name": "Pinto",
"emails": ["mail01#gmail.com", "mail02#gmail.com"],
"phones": ["123-234-566", "123-234-567", "123-234-568"],
"photo": "http://lorempixel.com/400/300/people/"
},
{
"first_name": "Alexandre",
"last_name": "Paiva",
"emails": ["mail01#gmail.com"],
"phones": ["123-234-560", "123-234-561"],
"photo": null
},
{
"first_name": "Oea",
"last_name": "Romana",
"emails": ["mail01#gmail.com", "mail02#gmail.com"],
"phones": ["123-234-566", "123-234-567", "123-234-568"],
"photo": "http://lorempixel.com/400/300/people/"
},
{
"first_name": "Nuria",
"last_name": "Pelayo",
"emails": ["mail01#gmail.com", "mail02#gmail.com"],
"phones": ["123-234-568"],
"photo": "http://lorempixel.com/400/300/people/"
},
{
"first_name": "Lisandro",
"last_name": "Matos",
"emails": ["mail01#gmail.com", "mail02#gmail.com"],
"phones": ["123-234-566", "123-234-567"],
"photo": null
}
]

Answer 1

First of all, you need to subscribe and then use setItem
this.contactService.getJSON().subscribe((data) => {
localStorage.setItem('myData', JSON.stringify(data);
});