How to iterate object keys using *ngFor?

Question

I've been digging around, and found out that I can use the following to use *ngFor over an object:

 <div *ngFor="#obj of objs | ObjNgFor">...</div>

where ObjNgFor pipe is:

@Pipe({ name: 'ObjNgFor',  pure: false })
export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => value[key]);
    }
}

However, when I have an object like this:

{
"propertyA":{
    "description":"this is the propertyA",
    "default":"sth"
 },
"propertyB":{
    "description":"this is the propertyB",
    "default":"sth"
 }
}

I am not quite sure how I can extract 'propertyA' and 'propertyB', so that it is accessible from the *ngFor directive. Any ideas?

UPDATE

What I want to do, is to present the following HTML:

        <div *ngFor="#obj of objs | ObjNgFor" class="parameters-container">
            <div class="parameter-desc">
                {{SOMETHING}}:{{obj.description}}
            </div>
        </div>

Where something would be equal to propertyA and propertyB (this is how the object is structured). So, this would lead to:

propertyA:this is the propertyA
propertyB:this is the propertyB

score 17 · Answer 1 · answered May 13 '17 at 04:58

17

Or instead of creating a pipe and passing an object to *ngFor, just pass Object.keys(MyObject) to *ngFor. It returns the same as the pipe, but without the hassle.

On TypeScript file:

let list = Object.keys(MyObject); // good old javascript on the rescue

On template (html):

*ngFor="let item of list"

answered May 13 '17 at 04:58

Jorge

1,730
20
27

Thank you!!! This made it look simple. You should add what to put on the template part btw =) – Gaspa79 May 09 '18 at 14:32
neat solution. I got the number values and the string values in the list though so I used the slice method to get the proper side of the array: options.slice(options.length / 2). Found this solution here: https://stackoverflow.com/questions/38554562/how-can-i-use-ngfor-to-iterate-over-typescript-enum-as-an-array-of-strings#38554683 – Willem de Jong Jul 05 '18 at 12:55

yurzui · Accepted Answer · 2018-08-02T04:38:02.393

16

Update

In 6.1.0-beta.1 KeyValuePipe was introduced https://github.com/angular/angular/pull/24319

<div *ngFor="let item of {'b': 1, 'a': 1} | keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

Plunker Example

Previous version

You could try something like this

export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value).map(key => Object.assign({ key }, value[key]));
    }
}

And then on your template

  <div *ngFor="let obj of objs | ObjNgFor">
   {{obj.key}} - {{obj.description}}
  </div>

Plunker

edited Aug 02 '18 at 04:38

answered May 05 '16 at 09:22

yurzui

205,937
32
433
399

The key value pipe is sorting out by the order of the keys and values orders in angular 6. How can we disable that ? – ideeps Oct 31 '18 at 15:36

score 14 · Answer 3 · edited May 23 '17 at 11:47

14

Just return the keys from the pipe instead of the values and then use the keys to access the values:

(let instead of # in the beta.17)

@Pipe({ name: 'ObjNgFor',  pure: false })
export class ObjNgFor implements PipeTransform {
    transform(value: any, args: any[] = null): any {
        return Object.keys(value)//.map(key => value[key]);
    }
}

@Component({
    selector: 'my-app',
    pipes: [ObjNgFor],
    template: `
    <h1>Hello</h1>
 <div *ngFor="let key of objs | ObjNgFor">{{key}}:{{objs[key].description}}</div>    `,
})
export class AppComponent {
  objs = {
    "propertyA":{
      "description":"this is the propertyA",
      "default":"sth"
    },
    "propertyB":{
      "description":"this is the propertyB",
      "default":"sth"
    }
  };
}

Plunker example

See also Select based on enum in Angular2

edited May 23 '17 at 11:47

Community

1
1

answered May 05 '16 at 09:14

Günter Zöchbauer

623,577
216
2,003
1,567

Gunter - I would like to show user either 'propertyA' or 'propertyB'. So I need to change the pipe somehow – uksz May 05 '16 at 09:18
Not sure what you mean by that. Depending no what criteria do you want to show one or the other? – Günter Zöchbauer May 05 '16 at 09:22
Not sure what exact use case you have in mind but I don't see why anything would not work with nested objects. – Günter Zöchbauer May 06 '16 at 09:42
Can this be coupled with `async` pipe if `objs` is asynchronous? – sabithpocker May 07 '17 at 18:36
Sure `{{someObservable | async | ObjNgFor}}` – Günter Zöchbauer May 07 '17 at 20:08
@GünterZöchbauer how I can access to object value in asynchronous case with this approach ? – leotesta Nov 28 '17 at 13:55

score 2 · Answer 4 · answered Oct 01 '18 at 13:13

keys.pipe.ts

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

@Pipe({ name: 'keys' })
export class KeysPipe implements PipeTransform {
    transform(obj: Object, args: any[] = null): any {
        let array = [];
        Object.keys(obj).forEach(key => {
            array.push({
                value: obj[key],
                key: key
            });
        });
        return array;
    }
}

app.module.ts

import { KeysPipe } from './keys.pipe';

@NgModule({
  declarations: [
    ...
    KeysPipe
  ]
})

example.component.html

<elem *ngFor="let item of obj | keys" id="{{ item.key }}">
    {{ item.value }}
</elem>

score -2 · Answer 5 · answered Dec 19 '19 at 02:16

-2

no use pipes this it example

*ngFor="let Value bof Values; let i = index"

{{i}}

answered Dec 19 '19 at 02:16

HaiNM

27
2

3

Complete code would be helpful instead of part of it. – zmag Dec 19 '19 at 02:46

How to iterate object keys using *ngFor?

5 Answers5

Update

Linked

Related