How to populate HTML with ngFor without json array

Question

How could i populate the HTML with simple JSON like:

{
    "id": 34,
    "name": "Tip 33",
    "description": "Tip description 33",
    "created_at": "2018-01-26 18:59:19",
    "updated_at": "2018-01-26 18:59:19"
}

I used the code as:

<ion-content>
  <ion-card *ngFor="let data of searchResults">
    <ion-card-header>
      {{data.name}}
    </ion-card-header>
    <ion-card-content>
      {{data.description}}
    </ion-card-content>
  </ion-card>
</ion-content>

But I get this error as :

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

My Code to fetch json is :

 this.apiService.getCareerDescription(data).retry(3)
      .subscribe(data => {
        console.log(data);
        this.loading.dismiss();
        this.searchResults = data;
        //let obj = JSON.parse(this.searchResults);
        //console.log(obj);

        console.log(this.searchResults);
        ;
      }, (err) => {
        this.loading.dismiss();
      }
    );

please help

Zoha Irshad · Accepted Answer · 2018-02-07 11:48:15Z

1

For this we have to implement custom pipe.

Pipe:

@Pipe({id : 'key'})
export class custompipe implements PipeTransform {


transform(value, arts:string[]) : any {
let key = [];
for(let key in value){
key.push({key : key, value:value[key]});
}
return key;
}
}

And use it as:

<span *ngFor="#data of SearchResult I key">
Key: {{data.key}} , value: {{data.value}}

answered Feb 7, 2018 at 11:48

Zoha Irshad

4675 silver badges5 bronze badges

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

Comments

Mahesh Jadhav · Accepted Answer · 2018-02-07 11:05:17Z

0

You do not have an array you have a simple object. So *ngFor is not needed here. You can just access the properties via their name. The error says that your searchResults is an object, not array.

<ion-content>
  <ion-card>
    <ion-card-header>
      {{searchResults?.name}}
    </ion-card-header>
    <ion-card-content>
      {{searchResults?.description}}
    </ion-card-content>
  </ion-card>
</ion-content>

edited Feb 7, 2018 at 11:05

Mahesh Jadhav

1,0891 gold badge8 silver badges13 bronze badges

answered Feb 7, 2018 at 10:41

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

4 Comments

user8231819 Over a year ago

i got this ERROR TypeError: Cannot read property 'name' of undefined

Suren Srapyan Over a year ago

Sorry, access via searchResults

Suren Srapyan Over a year ago

You search result comes from an API? Yes?. So try to enforce you with ? symbol. I have updated the post

Suren Srapyan Over a year ago

? will enforce if the object is not undefined or null then access it's property

Collectives™ on Stack Overflow

How to populate HTML with ngFor without json array

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related