how to loop to 2 times deeper in angular(2-4) with *ngFor

Question

From my firebase database, I get this JSON data

categories= [ 

      {
        "laptops" : [ null, 
          {
            "category" : "laptops",
            "description" : "ggg",
            "title" : "Nexus" <-- I want this value but i canot do that pls help me
          }, 
          {
            "category" : "laptops",
            "description" : "nnn",
            "title" : "HP"
          }, 
          {
            "category" : "laptops",
            "description" : "mmm",
            "title" : "Microsoft"
          }, 
          {
            "category" : "laptops",
            "description" : "mmm",
            "title" : "Razer"
          } 
        ],
      },


      {
        "tablets" : [ null, 
          {
            "category" : "tablets",
            "description" : "uuu",
            "title" : "Iphone"
          }, 
          {
            "category" : "tablets",
            "description" : "bbb",
            "title" : "Intel"
          }
        ]
      }


    ]

In my app.component.html

<div *ngFor="let category of categories; let i = index;" id="{{category.$key}}">

</div>

and is give me -> laptops and tablets

all is ok but how I can't get the title of category -> tablet

I have this code but is not working I get [object Object]

and I want to get ->

         <div *ngFor="let category0 of categorys; let i = index;" id="{{category0.$key}}">
            <div>{{i}}</div>

            <div *ngFor="let category1 of category0[i]; let ii = index;">
              {{category1}}
              <div>{{ii}}</div>

              <div *ngFor="let category2 of category1[ii]; let iii = index;">
                {{category2.title}}
                <div>{{iii}}</div>
              </div>

            </div>

          </div>

this is the output

0 [object Object] 1 [object Object] 2 [object Object] 3 [object Object] 4

and this is the error on console

AdminProductsComponent.html:92 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
    at NgForOf.ngOnChanges (common.es5.js:1689)
    at checkAndUpdateDirectiveInline (core.es5.js:10790)
    at checkAndUpdateNodeInline (core.es5.js:12216)
    at checkAndUpdateNode (core.es5.js:12155)
    at debugCheckAndUpdateNode (core.es5.js:12858)
    at debugCheckDirectivesFn (core.es5.js:12799)
    at Object.eval [as updateDirectives] (AdminProductsComponent.html:92)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:12784)
    at checkAndUpdateView (core.es5.js:12122)
    at callViewAction (core.es5.js:12485)

The categories is an array that have inside the tablets array and the laptos, and i want to get the title from all the tablets like iphone and intel — George C., May 14 '17 at 12:42
object is an Object type that is not iterable, in javascript — Roman C, May 14 '17 at 12:43

score 1 · Answer 1 · edited May 23 '17 at 11:54

1

Since your inner ng-for loops have to iterate over a key-value pair object, currently there is no proper support for iterating over such objects in angular2. Probably you should implement custom pipe to fetch the keys of an object.

You will get more idea here for implementing pipes: How to iterate [object object] using *ngFor in Angular 2

edited May 23 '17 at 11:54

Community

1
1

answered May 14 '17 at 12:40

Amit Chigadani

28,482
13
80
98

1

Thnx brother but i don't know nothing about pipes i gonna look on the internet , thank very much – George C. May 14 '17 at 13:05

score 0 · Answer 2 · answered May 14 '17 at 13:13

Since you have an array of objects, each with a key, you need to loop over the categories and get the keys for each category (just one in your example). You can do it by preparing a string[][] arrays of categoryKeys in your component, but if you want to do it with a pipe, which is cleaner, the pipe will look like

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

@Pipe({
  name: 'keys'
})
export class KeysPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return Object.keys(value);
  }
}

which you will need to declare in your module.

Your component html will look something like this:

<div *ngFor="let category of categories">
  <div *ngFor="let categoryKey of category | keys" id="{{categoryKey}}">
    <div>{{categoryKey}}</div>
    <div *ngFor="let categoryItem of category[categoryKey]">
      <div *ngIf="!!categoryItem">
        <div>{{categoryItem.title}}</div>
        <div>{{categoryItem.description}}</div>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 3 · answered May 14 '17 at 14:28

When you are having a property category in each item I wonder why you again group them. But still to fix your problem I have a solution as below,

constructor() {
    let key1[] = [];
    _.forEach(this.categories, function(value, key) {
      key1.push(value);
    })
    let realDat[] = []
    _.forEach(key1, function(k) {
          let te = Object.values(k);
          let d = Object.values(_.mapValues(te, function(o) {return o}))
          _.forEach(d, function(ve) {
            realDat.push(ve);
          })
    })
    this.realData=realDat;
}

Markup :

<div *ngFor="let category of realData; let i = index;">
    <span  *ngFor="let c of category">{{c.title}}<br/></span>
</div>

LIVE DEMO

how to loop to 2 times deeper in angular(2-4) with *ngFor

From my firebase database, I get this JSON data

In my app.component.html

3 Answers3

Linked