Unable to parse JSONArray Response in HttpClient 4.3 , Ionic 3

Ionic Framework ionic-v3
1

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

@Injectable()
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 => {
        resolve(data);
      }, err => {
        console.log(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() {
this.restProvider.getCandidates(this.c,this.s)
.then(data => {
this.json = data;
// alert(this.json);
console.log(this.json);
});
}
}

Trying to display array in a list in this format

{{candidate.c_name}}

{{candidate.c_post}}

``` 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
2

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">
          {{candidate.c_name}}
</ion-item>
3

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

4

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

this.http.get(url,{},{})
			.then(response =>			
			{
				if(response.status == 200)
				{				 
				 	this.Tags= JSON.parse(response.data);
5

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

0:{values}
1:{values}
6

that will do it too!..

bad json is hard work with

7

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

getCandidates() {
    this.restProvider.getCandidates(this.category,this.state)
    .then(data => {
      this.candidatesholder = data['candidates'];
      console.log(this.candidatesholder);
    
    });
  }

Then display array in view:

ion-content padding>
  <ion-content>
    <ion-list inset>
      <ion-item *ngFor="let candidate of candidatesholder">
        <h2>{{candidate.c_name}}</h2>
        <p>{{candidate.c_post}}</p>
      </ion-item>
    </ion-list>
  </ion-content>
</ion-content>
8

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

9

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

10

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

11

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).