Unable to parse JSONArray Response in HttpClient 4.3 , Ionic 3

I have to parse a JSONArray response from a server
My rest method is

export class RestProvider {
  apiUrl = 'https://xyz.phpp';
  constructor(public http: HttpClient) {
    console.log('Hello RestProvider Provider');
  getCandidates(categoryval,stateval) {
    const paramsval = new HttpParams({
      fromObject: {
        category: categoryval,
        state: stateval,
    return new Promise(resolve => {
      this.http.get(this.apiUrl+'/get_candidates.php',{ params: paramsval }).subscribe(data => {
      }, err => {
The response is in this format 

“candidates”:[{“c_id”:“3”,“c_name”:“James i”,“c_state”:“D”,“c_post”:“G”,“c_image”:null,“c_category”:“G”},{“c_id”:“4”,“c_name”:“OWy”,“c_state”:“G”,“c_post”:“D”,“c_image”:null,“c_category”:“GAL”}]}

Calling the method in this format

getCandidates() {
.then(data => {
this.json = data;
// alert(this.json);

Trying to display array in a list in this format



``` The issue is that it is throwing an Error: ``` Cannot read property 'candidates' of undefined ``` which i assume is when i am trying to reference the 'candidates' array returned by the webservice.How can i resolve this?.Thanks

you need to parse the json,

this.json = JSON.parse(data);

but your json text is missing a leading ‘{’

I use

to validate json documents til i know what is going on,

and candidates is an array

so it would be

<ion-item *ngFor="let candidate of json.candidates">

That throws an error of an unexpected token…the json i receive is valid,i lost the opening brace when i pasted on here…i don’t think the data returned by the Httpclient contains pure json, i believe there is other info like headers etc

ok dump the data object and see what the format is… and then use the json data as the input to JSON.parse

some of my code does

			.then(response =>			
				if(response.status == 200)
				 	this.Tags= JSON.parse(response.data);

The format of the object is the problem,it contains the numerical index value of the array eg


that will do it too!..

bad json is hard work with

My json was correct…i resolved the issue…let me show it so that i can help someone:

getCandidates() {
    .then(data => {
      this.candidatesholder = data['candidates'];

Then display array in view:

ion-content padding>
    <ion-list inset>
      <ion-item *ngFor="let candidate of candidatesholder">

ok… your code and my code are the same you used [], I used . (dot) but the json doesn’t pass the validator.

I mentioned that i missed an opening brace when i was copying the json here…thanks for your help,i really appreciate you having time for a newbie like me

the missing brace i got… the 0:{values}… doesn’t pass the json validator

I’m pretty sure it’s bad practice to create a promise just to subscribe to an observable and then resolve the promise. (Is this a memory leak, subscribing to a new observable every time?) At any rate, I think you should just return the observable from the method. And then in your template, unwrap it with the async pipe:

<ion-item *ngFor="let candidate of candidatesholder | async">

I know there’s some grumbling about why the angular team decided to make the http client return an observable instead of a promise, but the idea is that you can use startWith and retry. If you really want a promise you should probably use toPromise witch will unsubscribe from the observable and resolve with the first returned value. (The async pipe also takes care of unsubscribing for you).