-1

enter image description herehi 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>
vinay k hegde
  • 243
  • 4
  • 18

1 Answers1

-1

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.

Corrected code:

ngOnInit() {
  this.dataStorageService.getIncidents()
  .subscribe(
    (data: Incident[]) => this.incidents = data.Events, // <--
    (err: any) => console.log(err),
    () => console.log('All done getting incidents')
  );
}
Tsvetan Ganev
  • 8,246
  • 4
  • 26
  • 43
  • Hi thanks for the suggestion. I followed your above input as well. I am using *ngFor="let incident of incidents. incidents would already have array because i am using data.Events as you suggested However {{incidents}} this is giving me correct array of values, but when i try {{incident.Title}} this gives me empty instead of the value – vinay k hegde Sep 21 '18 at 15:54
  • It's lowercase `title`, did you try it with that? – Tsvetan Ganev Sep 21 '18 at 17:13
  • yeah I tried with lowercase as well, infact value coming from api is Title itself. – vinay k hegde Sep 22 '18 at 03:38
  • I got to know the error but i am not getting how to solve, its like the data which I am getting from api is in the string format, I do not know how to convert it now to object below is the example Events: [,…] 0: "{'IE_Incident_Start_Time': '', 'IE_Start_time': '8/14/2018 10:50', 'Title': 'Intermittent Issues on CSP Login Page', 'IE_Start_By': '', 'Domain': 'IT', 'Impact': 'Users (Monitoring & External) will now be able to login to the CSP Login page without any issues.'}" – vinay k hegde Sep 22 '18 at 05:16
  • Added response image above – vinay k hegde Sep 22 '18 at 06:38
  • Can I use json.prase() to convert string to object? – vinay k hegde Sep 24 '18 at 05:22