Object within object data structure in Angular

Question

I'm receiving these results from an API:

{
  "97": {
    "Title": "This is a title",
  },
  "98": {
    "Title": "This is another title",
  }
}

I'm using this interface:

export interface Product {
  Title: string;
}

export interface SKU {
  [key: string]: Product
}

Does my interface looks alright? And how do I work with this type of stracture in Angular regarding *ngFor?

It looks okay to me. To use with ngFor you would have to convert this to an array or something you can iterate over — Explosion Pills
– Explosion Pills, Commented Oct 2, 2018 at 18:57
There's also the keyvalue pipe depending on what version you're using. — Phix
– Phix, Commented Oct 2, 2018 at 19:21

Tawfiek Khalaf · Accepted Answer · 2018-10-02 19:19:26Z

2

It looks okay I think , and for using this with ngFor I think you need to convert the object to array using map function .

    var arr = Object.keys(objectName).map((index)=>{
    let item = objectName[index];

    return item ;
});

and then using arr within *ngFor

answered Oct 2, 2018 at 19:19

Tawfiek Khalaf

5074 silver badges18 bronze badges

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

Comments

Tommy · Accepted Answer · 2018-10-02 19:28:03Z

1

What you want to achieve is an array

[
    "97": {
        "Title": "This is a title",
     },
    "98": {
        "Title": "This is another title",
     }
]

to parse your API response as SKU[]. To achieve this structure you can either correct your server code (correct way to do it) or do some fancy object to array conversions (don‘t do).

After parsing this result in your component as SKU[] you can iterate in your view using *ngFor.

answered Oct 2, 2018 at 19:28

Tommy

2,4731 gold badge25 silver badges51 bronze badges

Collectives™ on Stack Overflow

Object within object data structure in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related