Mapping the JSON values to the UI fields in Angular 4 - node.js

Question

I am trying to do an update operation using Mean Stack with Angular 4. I am new to this technology. For update oprtn I need to map the values to UI form based on id selected to update the record. My data service is fetching record values from MongoDb database in the form of JSON which needs to be updated. However, I am unable to set those parameters to the fields present over the form in the typescript code.
I am using JSON.parse method for implementing it But getting below error.
Error: SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse ()
Typescript code
updateitem(itemid){
let updatedresult;
console.log("toupdateid", itemid);
this.dataService.getItemById(itemid)
.subscribe(
res=> {
this.res =JSON.parse(res);
this.newSession.trainingName =res["TrainingName"],
this.newSession.description = res["Description"];
console.log('newsession', this.newSession);
},
err=> this.apiError = err,
() => {
this.getFormdetails();
}
)
}
dataservice
getItemById(id):Observable<any>{
console.log('idvalue', id);
return this.http.get("http://localhost:3000/getitem"+"/"+ id)
.map(result =>{ this.result = result.json();
console.log('getitembyid' ,result.json())})
.catch((error:any) => Observable.throw('Server Error to get the item'));
}
}

Answer 1

.map(result =>{ this.result = result.json();
console.log('getitembyid' ,result.json())})
Change it to
.map(result => result.json())
And remove the JSON.parse in ts code as now it will return from the service as a JSON object itself

Answer 2

That error occurs when server sends a invalid json. You need to check response of the server.
there are different reasons for that but most likely:
you are sending your request to a wrong endpoint. So instead of json you get a document starting with u and it tries to parse it.
Another one is server sending you a wrong response which is not in JSON format. Try to see if response is turned into a json string on server side.
But since it starts with u its most likely trying to parse an undefined string. I sugest instead of subscribing function you should nest promises like following.
getItemById(id):Observable<any>{
console.log('idvalue', id);
return this.http.get("http://localhost:3000/getitem"+"/"+ id).then(result => {
return result.json();
}) //this will return promise
.catch((error:any) => Observable.throw('Server Error to get the item'));
}
}
and on your updateItem
updateitem(itemid){
let updatedresult;
console.log("toupdateid", itemid);
this.dataService.getItemById(itemid)
.then(
res=> {
this.res =JSON.parse(res);
this.newSession.trainingName =res["TrainingName"],
this.newSession.description = res["Description"];
console.log('newsession', this.newSession);
this.getFormdetails();
}).catch(err => {
this.apiError = err
})
)
}