ngFor from object?

Question

I'm using Ionic 2 / Angular, but I realized that the ngFor function can't read objects. Also, I need it to be shown only if the cart is not empty.

Object:

{
    "48131": {
        "code":"D40905",
        "name":"ДАМСКА ПЛЕТЕНА БЛУЗА КЪС РЪКАВ ЩАМПА REASON",
        "price":"18.99",
        "size":"STANDART",
        "qty":"1"
    },
    "49410": {
        "code":"D41821",
        "name":"ДАМСКА БЛУЗА ТРИКО",
        "price":"44.99",
        "size":"M",
        "qty":"4"
    }
}

HTML:

<ion-row *ngFor="let p of cart">
    <ion-col col-3>
        <div><img src="http://example.com/products/small/{{p.code}}-1.jpg" /></div>
    </ion-col>
    <ion-col col-9>
        <ion-row>
            <ion-col col-12>
                <div>{{p.name}}</div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-12>
                <div>{{p.qty}} бр ({{p.size}} размер) x <b>{{p.price}} лв</b></div>
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col col-12>
                <div (click)="deleteCart({{p.id}})">Изтрий <ion-icon name='trash' item-start color="danger"></ion-icon></div>
            </ion-col>
        </ion-row>
    </ion-col>
</ion-row>

Can someone help me with this? I've tried so many things...

can you show what the cart object looks like? doesn't seem to be an array. — Daniel Ormeño, Jul 06 '17 at 10:34
Yes duplicate import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'keys' }) export class KeysPipe implements PipeTransform { transform(value): any { if(!value) return null; return Object.keys(value); } }
{{member[key]}} — Arun, Jul 06 '17 at 10:44

Yordan Nikolov · Accepted Answer · 2019-05-02T08:53:27.213

3

you can use Pipe for that purpose

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'object' 
})
export class ObjectForPipe implements PipeTransform {
    transform(value: any, arg1): any {
        return typeof value!=='object' ? [] : Object.keys(value);
    }
}

In AppModule -> @NgModule

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ObjectForPipe } from 'path-to-pipe/object.pipe.ts';

@NgModule({
  declarations: [
    AppComponent,
    ObjectForPipe
  ],
  imports: [
    ...
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

HTML

<div *ngFor="let key of objs | object">

From version 6.1, Angular introduced keyValue Pipe:

<div *ngFor="let item of map | keyvalue">
   {{item.key}}:{{item.value}}
</div>

edited May 02 '19 at 08:53

answered Jul 06 '17 at 10:35

Yordan Nikolov

2,598
13
16

I've tried with the `@Pipe`, but I always get errors. This time - `@Pipe/@Directive/@Component annotation.`. When I add it in ngModule, I receive the same error. – Samurai Labs Jul 06 '17 at 10:40
I've edited my answer with all you need to do it works. – Yordan Nikolov Jul 06 '17 at 10:44
Thanks! Now I get error `Uncaught (in promise): TypeError: Cannot convert undefined or null to object`. Which is weird, since I see that the object is defined. – Samurai Labs Jul 06 '17 at 10:55

score 1 · Answer 2 · answered Jul 06 '17 at 10:37

1

Your card json is not array. It should be

[
    "48131": {
        "code":"D40905",
        "name":"ДАМСКА ПЛЕТЕНА БЛУЗА КЪС РЪКАВ ЩАМПА REASON",
        "price":"18.99",
        "size":"STANDART",
        "qty":"1"
    },
    "49410": {
        "code":"D41821",
        "name":"ДАМСКА БЛУЗА ТРИКО",
        "price":"44.99",
        "size":"M",
        "qty":"4"
    }
]

answered Jul 06 '17 at 10:37

Mankeomorakort

1,451
1
22
36

key, value pairs are not valid in arrays. – Sai M. Jul 06 '17 at 10:55
nice bong!!!!!! – Leang Jan 16 '19 at 04:48

ashley · Answer 3 · 2017-07-06T14:21:21.920

-1

Convert your json object to an array based on this link

https://stackoverflow.com/a/37667589/2013245

Then you should be fine.

edited Jul 06 '17 at 14:21

answered Jul 06 '17 at 10:40

ashley

1,008
17
37

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/16630149) – iehrlich Jul 06 '17 at 13:26
well said. corrected. – ashley Jul 06 '17 at 14:21

ngFor from object?

3 Answers3