Question 110376 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

How present JSON List in Angular HTML with *ngFor

I get a result in the JSON Format like these sample from a webservice.
How can i iterate over this items to prensent the objects

HTML Code – not working

<div *ngFor="let item of List">
  {{item.Code}}
</div>

JSON Sample

"List": {
  "0": {
         "Code": "A"
       },
  "1": {
         "Code": "B"
       },
  "2": {
         "Code": "C",
       }
  }

unfortunally the webservice does not provide this as an Array [] of objects

I want to see the list of all items für the Key "Code"

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As it was not working with

    <div *ngFor="let item of List | keyvalue">
  {{item.value.Code}}
</div>

    Typescript was throwing an error because {{item.value.Code}} was not known.

    I did some additional research and found the following solution

    <div *ngFor='let key of objectKeys(List)'>
  {{List[key].Code}} 
</div>

    in the typescript class corresponding to the html file you have to add

    objectKeys = Object.keys;

  2. 0

    You can use KeyValuePipe like here.

    So the your code would be something like this:

    <div *ngFor="let item of List | keyvalue">
  {{item.value.Code}}
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search