How to print the json array values in a list using *ngFor in Angular 2?

Question

I have a json array and i want to print the values in a simple list. How to print the values? Do I have to follow key value method? I'm adding my Json array structure and my sample code. It is showing me errors.

Expected Output

*456
*123

or Arun :123 
test:456

Error:

"'[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays."

Json Array

   {
        "records": [{
            "arun": [1, 2, 3],
            "test": [4, 5, 6]
        }]
    }

**myTest.ts**

export class HomePageComponent extends AppComponent {

  public bundle:  any[];

   ngOnInit(){
     this.readArray();
   }

   readArray() {
    this.bundle =  {
        "records": [{
            "arun": [1, 2, 3],
            "test": [4, 5, 6]
        }]
    }
    console.log("array",this.bundle);
   }

testComponent.html

<ul *ngFor="let det of bundle;">
  <li>{{det.records}}</li>
</ul>

Sajeetharan · Accepted Answer · 2017-10-05 05:40:26Z

2

You need to use ngFor over an array, it should be <div *ngFor="let record of bundle.records"> , also you have a nested array, you can access the items using Object.keys as in the demo

@Component({
  selector: 'my-app',
  template: `
   <div *ngFor="let record of bundle.records">
      <ul *ngFor="let key of objectKeys(record)">
         <li>{{key}} :: {{record[key]}}</li>
      </ul>
   </div>
  `,
})

DEMO

answered Oct 5, 2017 at 5:40

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

2 Comments

Deepak Pookkote Over a year ago

is there any way to put this inside a function and make console.log for knowing the values and how it is printing.. and i wanted my output to be 456 !!! how to do that@Sajeetharan

Sajeetharan Over a year ago

@DeepakVijay check this demo plnkr.co/edit/2lyNFqkKFoFVbU5nXWgq?p=preview

jitender · Accepted Answer · 2017-10-05 05:36:43Z

0

Have Object.keys accessible in the template and use it in *ngFor.

  export class HomePageComponent extends AppComponent {
  objectKeys = Object.keys;

then in your template

 <ul *ngFor="let key of objectKeys(bundle.records[0]);">
    <li>{{key + ' : ' + bundle.records[0][key]}}</li>
  </ul>

answered Oct 5, 2017 at 5:36

jitender

10.4k1 gold badge21 silver badges49 bronze badges

Collectives™ on Stack Overflow

How to print the json array values in a list using *ngFor in Angular 2?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related