Iterate JSON

Ionic Framework ionic-v3
1

Hello everybody, I’m following this guide http://blog.ionic.io/10-minutes-with-ionic-2-calling-an-api/ but I get errors like “NgFor can’t iterate [object object]”.
How to iterate a json object like this?
----> https://randomuser.me/api/?results=2

thanks in advance

G

2

I think you’re trying to iterate over the literal string of ‘[object object]’, meaning that you’re not parsing the JSON object right.

Make the map() function multi-line, and add a breakpoint after you call .json() to parse the response. See what resJson is set to and that should give you an idea of how to properly map your API. My guess is that it’ll be something like this:

this.http.get('http://api-call')
      .map(res => {
           let resJson  = res.json();
           console.log("PARSED OBJECT: " + resJson);
           return resJson.value.results; // this is just my guess, verify in debugger
       })
      .subscribe(results => {
           this.results = results; // "results" should be an array of results
           resolve(this.results);
      });
4

Thanks for your answer @jvall, but does not resolve this issue.
Using your solution I get “EXCEPTION: resJson.value is undefined”.

Changing return resJson.value.results to return resJson.results gives me the right series of [object Object], but stil can’t parse.

(I tried with https://randomuser.me/api/?results=5 I get 5*[object Object])

Any other hint?

Edit: Json structure, I have to access all the lists in “results” array
{
“results”: [
{
“gender”: “female”,
“name”: {
“title”: “ms”,
“first”: “alexis”,
“last”: “lee”
},
“location”: {
“street”: “1603 opoho road”,
“city”: “wellington”,
“state”: “tasman”,
“postcode”: 57105
},
…
“n-key”: “value”
},
{…}, <------------------- 2nd RANDOM USER
…
{…}, <------------------- Nth RANDOM USER
],
“info”: { <----------------------- Don’t need this
"seed": “e65d4bad076516d3”,
“results”: N,
“page”: 1,
“version”: “1.1”
}
}

(How to render indentation?)

EDIT 2: Found a solution, I will provide code as soon as possible

5

So this is my proposition. I think that you have a provider, so in your provider you can put this code:

getRemoteData() {
this.http.get(‘https://randomuser.me/api/?results=2’)
.map(res => res.json())
.subscribe( data => {
this.users = data;
});
}