CODEWITHSUNDEEP
angular
Benoit
Benoit

Reputation: 472

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

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.

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;
    });
}

Upvotes: 2

Views: 2095

Answers (2)

Benoit
Benoit

Reputation: 472

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?

Upvotes: 0

slaesh
slaesh

Reputation: 16917

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

Upvotes: 1

Related Questions