0

I would like to be able to retrieve the results from a JSON file but I cannot find the solution. I can retrieve from normal JSON but not in Object format.

Typescript

this.http.get('http://example.com/api')
  .subscribe((data) => {
    console.log(data);
  });

The API JSON file is displayed this way:

{
  1: {id:1, name: "string"}
  2: {id:1, name: "string"}
  3: {id:1, name: "string"}
  4: {id:1, name: "string"}
}

I would like to be able to make a loop of this data afterwards

<ion-item *ngFor="let item of data" >
  <div>
    {{item.name}}
  </div>
</ion-item>

Thank you in advance

Here is the answer to my problem:

<ion-item *ngFor="let item of data | keyvalue" >
  <div>
    {{ item.key }} {{ item.value['data'] }}
  </div>
</ion-item>
Improve this question
6
  • We need a lot more context here: With "JSON File" you mean a JSON API? What do you mean with "cannot find the solution"? What do you mean with "normal JSON but not in Object format" - this makes no sense, please give some examples. Commented Mar 25, 2021 at 6:52
  • Also your example JSON is not JSON, it's a javascript object. Commented Mar 25, 2021 at 6:52
  • I have a JSON file which is transmitted from an API, the data inside is shown as in the example below. Commented Mar 25, 2021 at 7:02
  • when I say normal, I mean there without the number with the results 1:, 2: ... Commented Mar 25, 2021 at 7:04
  • 1
    but if that is what the API decides to return, you have to handle it? i'm not sure what you are trying to todo. the example you've shown IS an object with keys 1-4. maybe you want an array instead, like this? [{id:1, name: "string"}, {id:1, name: "string"},...], anyway it would be really helpful to include in your question what you expect or want to achieve :) Commented Mar 25, 2021 at 7:07

1 Answer 1

Reset to default
1

You have multiple possibilities to loop over this response object:

  1. use the keyvalue pipe from angular: *ngFor item of data | keyvalue
  2. convert to an array using Object.values(data) or Object.entries(data). the former gives you only the value object, the latter also the "numbers"

What you need to keep in mind: the returned object does not have a defined order. So if you use either method, the order of the iteration is not defined and COULD be random.

It MAY be right on your machine/browser but you SHOULD NOT rely on it. Therefore make sure to sort your data AFTER converting it to an array (if the data is supposed to be ordered).

If the order is given by the "numeric" keys in the original object, i would recommend to use Object.entries, wich will give you an array of key-value tuples

[[1, {id:1, name: "string"}], [...], ...]

which you can sort easily by the first tuple item.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I'm new to Ionic and don't understand everything, I tried looking for examples with the recent version to try to understand but to no avail. Do you have an example for me so that I try to understand?
angular.io/docs is your best friend. i think the angular docs are pretty extensive. example for the keyvalue pipe: angular.io/api/common/KeyValuePipe#examples
but you do know typescript or at least javascript?
Ok i found it, thanks for guiding me i will update the answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.