Clash Royale CLAN TAG#URR8PPP

Angular6 error: the data which I am getting from api is in the string format,below is the response image

hi want to show the data from my api to my frontend (Angular 6), but this error comes up: I am using HttpClient method from angular 6 I am new to angular

Angular6 error: the data which I am getting from api is in the string format, I need to convert it to object, below is the response image

this is model.ts

export class Incident
public Title: string;
public status: string;
constructor(Title: string, status: string)
this.status = status;
this.Title= Title;




this is component

import Component, OnInit from '@angular/core';
import Router from '@angular/router';
import Incident from '../../shared/incidents.model';
import DataStorageService from '../../shared/data-storage.service';

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

incidents: Incident;

constructor(private router: Router, private dataStorageService: DataStorageService)

ngOnInit()
this.dataStorageService.getIncidents()
.subscribe(
(data: Incident) => this.incidents = data,
(err: any) => console.log(err),
() => console.log('All done getting incidents')
);



this is service

import Injectable from '@angular/core';
import HttpClient from '@angular/common/http';

import Observable from 'rxjs/Observable';
import Incident from './incidents.model';

@Injectable()
export class DataStorageService
constructor(private http: HttpClient)

getIncidents(): Observable<Incident>
console.log('Getting all incidents from server');
return this.http.get<Incident>
('api/url');




my json


"Events": ["'title': 'some title', 'Incident_Status': 'status'",
"'title': 'some title', 'Incident_Status': 'status'"]



html view

<div class="card" *ngFor="let incident of incidents">
<div class="card-header">
<span class="badge badge-danger"></span>incident.Title
<span class="badge badge-danger"></span>incident.Incident_Status
</div>
</div>


3 Answers
3

There are 2 mayor issues in your approach:

Your JSON is not an array

When deserialized, your JSON is not an array, its an object with the following signature:

interface IncidentResponse
Events: Incident;



So your implementation

getIncidents(): Observable<Incident>
return this.http.get<Incident> ('api/url');



Is declaring an wrong return type, as your are instead returning Observable<IncidentResponse>

Observable<IncidentResponse>

For this reason, ngFor is throwing the already mentioned error, as you are trying to iterate over an object.

ngFor

To correct this, you can do the following:

getIncidents(): Observable<Incident>
return this.http.get<IncidentResponse> ('api/url').pipe(map(response => response.Events));



Incorrect model definition

Using classes as type arguments in the methods of the HttpClient is dangerous, as the objects returned by them are not instances of those classes.

HttpClient

For a class instance to be created, you need to use the new operator, but behind the scenes, the objects are created by using JSON.parse which return POJOs.

new

JSON.parse

POJOs

This can cause run-time errors, for example, when trying to invoke class functions as they wont be defined.

Furthermore, the members of your model are incorrectly defined, as they dont match the names of the JSON properties.

You can solve your issue, and prevent the class related ones, by changing your model definition to:

export interface Incident
title: string;
Incident_Status: string;



You are trying to iterate an object instead of an array. This happens because the list of events are inside the Events key, but you aren't accessing it to extract the list of events. Instead you are using the root of the response object.

Events

Corrected code:

ngOnInit()
this.dataStorageService.getIncidents()
.subscribe(
(data: Incident) => this.incidents = data.Events, // <--
(err: any) => console.log(err),
() => console.log('All done getting incidents')
);



title

You have an error on your json! Also you dont need to type data as incidents since your response already return an Observale of Incidents and Angular maps the response for you so.
your ngOnInit should be :

ngOnInit()
this.dataStorageService.getIncidents()
.subscribe(
(data => this.incidents = data,
(err: any) => console.log(err),
() => console.log('All done getting incidents')
);



You Json is :

{
"Events": ["'Title': 'None', 'Incident_Status': '','Title': None,
'Incident_Status': None, "]



And you ned to make each object folowed by , like this:


"Events": ["'Title': 'None', 'Incident_Status': '','Title': None,
'Incident_Status': None, "]



And see how the response gets to your HTML cause you might have to call your object like :

*ngFor="let incident of incidents.Events


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.