Angular convert object to array

Question

I have a json that an object I try to transform into an array otherwise when I loop on it I get [object object], in my code I tried something that works but it only shows me the values of each field instead of showing me key => value.

How to display the key and values of my json in my html ? is there a better way to convert an object to an array ?

json

{
 "toto": [
 "titi",
 "tata"
 ],
"foo": [
 "foobar",
 "footix"
 ]
}

ts.file

fetchPosts() {
 let resp = this.summaryService.getAllSummery()
 this.sub = resp.subscribe((res: Isummary[]) => {
 this.summaryArray = res
 });
 }

interface

export interface Isummary {
 toto:string[],
 foo:string[]
}

html

<div*ngFor="let post of summaryArray | keyvalue">
 <span>{{post.key}}</span>
 <span *ngfor="let value of post.value">{{ value }}</span>
</div>

• archelite: summaryArray's type is Isummary[] which an object type. So you are trying to loop on a Object Array, I guess it's normal if it display "object Object" in your html. If you want to display values which are inside, try with a second ngFor and use keyvalue pipe : angular.io/api/common/KeyValuePipe
• user16356529: i already try keyvalue pipe but i don't like this way

Answer 1

You can use the KeyValuePipe and you don't have to change anything in the object

export interface Isummary {
 toto: string[];
 foo: string[];
}
@Component({
 selector: "example",
 template: `
 <div *ngFor="let item of object | keyvalue">
 <span>key: {{ item.key }}</span>
 <span>Values</span>
 <span *ngFor="let value of item.value">{{ value }}</span>
 </div>
 `,
})
export class ExampleComponent {
 object: Isummary = {
 toto: ["titi", "tata"],
 foo: ["foobar", "footix"],
 };
}

or you can use Object.entries

@Component({
 selector: "example",
 template: `<div *ngFor="let item of object">
 <span>key: {{ item[0] }}</span>
 <span>Values</span>
 <span *ngFor="let value of item[1]">{{ value }}</span>
 </div>`,
})
export class ExampleComponent {
 object = Object.entries({
 toto: ["titi", "tata"],
 foo: ["foobar", "footix"],
 });
}

• user16356529: is it necessary to add the values ? because the json is an example I have in real json more than 2000 values and the other question how you loop on it in the html to have key and values?
• user16356529: I updated my code with the keyvalue pipe but for the value it doesn't work
• Chris: can you give an example on stackblitz?
• Chris: my example stackblitz.com/edit/angular-ivy-xlrlww?file=src/app/…
• user16356529: I'm a bit of a beginner, I don't know how to do it yet, but I did the same as you except the const object: Isummary = { toto: ["titi", "tata"], foo: ["foobar", "footix"], }; because the data comes from a json that I call via a service and there is a lot of data in the real json I can't put it like that right?

Answer 2

The answer of @Chris is the Angular way of doing it. Here is another approach from the js only side.

Assume we have:

{
 "toto": [
 "titi",
 "tata"
 ],
"foo": [
 "foobar",
 "footix"
 ]
}

You can use this, to transform it into an array:

const toArray = (data) => {
 return Object.keys(data).map(key => data[key]); 
} 

In the end it should look like this:

[
 [
 "titi",
 "tata"
 ],
 [
 "foobar",
 "footix"
 ]
]

• user16356529: where are the keys ? I need to display key and values