How do I target a object key in *ngFor loop with Angular2

Question

In Angular 2 latest RC context I try to build a view with several tabs. Data come from an API where I need to make calls in two steps to retrieve targeted data.

Each tabs contains accordion groups and relate to categories
Each accordion groups contains bullet list and relate to categories[i].subtopics

This part works perfectly well.

Things become more tricky when I try to implement the <li>tag with data coming from a second array subTopics. I try several combinations of *ngFor="let services of subTopics without success. What are y options to display the way I want (see comment in HTML template)

My component HTML

<tabset>
<tab heading="{{category.name}}" *ngFor="let category of categories | orderBy" >
    <h2>Content</h2>
    <accordion>
        <accordion-group  heading="{{subtopic.name}}" *ngFor="let subtopic of category.subtopics | orderBy">
            <li>
<!-- Here is where I want to display value for each services.name key related to my subtopic. -->
           </li>
        </accordion-group>
    </accordion>
</tab>

My `categories` JSON

My categories array structure looks like this. After retrieving this object I iterate over each categories[index].subtopicsin order to generate my subTopics array.

[{
    "code": "FIRST_CATEGORY",
    "name": "First Categories", //Tab heading
    "subtopics": [{
        "code": "CODE1",
        "name": "Name for Code 1" //Accordion group heading
    }, {
        "code": "CODE2",
        "name": "Name For Code 2" //Accordion group heading
    }]
},{
    "code": "SECOND_CATEGORY",
    "name": "Second Categories", //Tab heading
    "subtopics": [{
        "code": "CODE3",
        "name": "Name for Code 3" //Accordion group heading
    }, {
        "code": "CODE4",
        "name": "Name for Code 4" //Accordion group heading
    }]
}]

My `subTopics` JSON

My subTopics array structure looks like this. I simplify it a lot, as there is many key/value per services.

[{
    "subtopic": "CODE1",
    "services": [{
        "code": "755",
        "name": "The Name of My Code 755" //my <li> Tag
    }, {
        "code": "199",
        "name": "The Name of My Code 199" //my <li> Tag
    }]
}, {
    "subtopic": "CODE2",
    "services": [{
        "code": "761",
        "name": "The Name of My Code 761" //my <li> Tag
    }, {
        "code": "356",
        "name": "The Name of My Code 356" //my <li> Tag
    }]
}]

This array is build using this function where code and index coming from my categoriesarray iteration.

getSubServicePerTopic(code, index){
    this._dxdService.getSubTopics(code, this.regionId)
    .subscribe(subTopics => {
        this.subTopics[index] = subTopics;
    });
}

Possible duplicate of [access key and value of object using \*ngFor](http://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor) — Christopher Moore, Jan 31 '17 at 17:34
thanks @ChristopherMoore I already review that topic. Could it be that I failed to build a proper Pipe()? — Benoit, Jan 31 '17 at 17:37
`ngFor` works with `Array`. It seems you are using `subTopics[0]` and as you have mentioned that `subTopics` contains an array of object, `subTopics[0]` should contain an object which will not work with `ngFor`. So use `subTopics` instead. — micronyks, Jan 31 '17 at 17:38
@Benoit Impossible to say without looking at more of your code :) If you don't want to use a pipe, create a function getKeyArray() and call that instead — Christopher Moore, Jan 31 '17 at 17:38
Please show structure of `categories` and `subTopics`. :) Maybe show your `Pipe` too. — slaesh, Jan 31 '17 at 18:11
@mxii I've update my post with complete overview of my HTML templates and JSON structure for the 2 arrays involved. Hope it makes more sens. Any input will be appreciated. — Benoit, Feb 01 '17 at 11:26

score 1 · Accepted Answer · answered Feb 01 '17 at 12:27

1

I am not quite sure whats your exact problem, but here's a starting point to discuss. :)

Changed your component's (tabset, tab, ..) to div's:

<div class="tabset">
  <div class="tab" *ngFor="let category of categories" >
      <h2>{{category.name}}</h2>

      <div class="accordion">
          <div class="accordion-group" *ngFor="let subtopic of category.subtopics">
            <h3>{{ subtopic.name }} </h3>
            <ul>
              <li *ngFor="let service of getServices(subtopic)">
                <!-- Here is where I want to display value for each services.name key related to my subtopic. -->
                {{ service.code }} : {{ service.name }}
             </li>
           </ul>
          </div>
      </div>
  </div>
</div>

getServices(subtopic) {
   let s = this.subtopics.find(st => st.subtopic == subtopic.code);
   return s ? s.services : [];
}

live demo: https://plnkr.co/edit/HfQTYONXB67DvkQnv4KL?p=preview

answered Feb 01 '17 at 12:27

slaesh

16,659
6
50
52

Many thanks @mxii. It put me on the right path but not yet fixed. In live scenario my `subtopics`is populated after API call when `categories`in done. So with you example s.services always return `undefined`. – Benoit Feb 01 '17 at 14:39
What is the option to make the getService call waiting for `subtopics` being populated. I try with `.then()`but it's not an allowed type. At least I learn that I can call a function in *ngFor. Angular is new for me – Benoit Feb 01 '17 at 14:42
Tweaking your function as it `getServices(subtopic) { if(typeof this.subtopics[subtopic.code] !== "undefined"){ return this.subtopics[subtopic.code].services; } }` returns what I expect, but it take some seconds I don't really understand Might be a better way? – Benoit Feb 01 '17 at 15:45
What do you mean with `takes some seconds`? – slaesh Feb 01 '17 at 19:42
When my App loads, the `subtopics` Array is empty as it is populated after `categories` are ready with several API calls based on `categories.subtopics`. Maybe there is a better way to postpone loading of the app when all data are retrieved? Currently the complete sequence takes around 5 seconds – Benoit Feb 02 '17 at 17:27

score 0 · Answer 2 · answered Feb 01 '17 at 15:46

Tweaking your function as it

getServices(subtopic) {
    if(typeof this.subtopics[subtopic.code] !== "undefined"){
        return this.subtopics[subtopic.code].services;
            }
        }

returns what I expect, but it take some seconds I don't really understand Might be a better way?

How do I target a object key in *ngFor loop with Angular2

My component HTML

My categories JSON

My subTopics JSON

2 Answers2

My `categories` JSON

My `subTopics` JSON