While looping API response in accordion menu data missing in Angular4

Question

I am tying to bind the api response (json) in accordion menu ,Here everything is working fine but in accordion I have category,group and subgroup .

In category there is one value is json, In group there are 4 values but in my case it is binding only one Each group has 2 subgroups

Here I have attached the working example of my case ,Please refer this and guide me to bind every single data in json

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-klfe6q?file=app/app.component.html

Julius Dzidzevičius · Accepted Answer · 2018-04-30 13:10:33Z

2

The problem is that you run *ngFor and set same ids and data-targets. To solve that you can use indexes *ngFor creates in every loop.

To use them you must assign a template expression to HTML attributes. Example:

<div *ngFor='let group of data; let j=index'>
  <input [id]="'id' + j" />
</div>

See the working DEMO here

answered Apr 30, 2018 at 13:10

Julius Dzidzevičius

11k11 gold badges41 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nikson Over a year ago

In this accordion how can I programmatically open the category menu only.

Julius Dzidzevičius Over a year ago

Most straightforward way might be to mimic click event. Like getElementById etc., but in Angular way - with @ViewChild(). Or maybe there is a better way. You should make a new question for this

Julius Dzidzevičius Over a year ago

Problem is that you try to use groupcode and other two variables out of their templates scopes - [C_code]="categorycode". I have couple ideas and will post after i test it out

Nikson Over a year ago

okay thanks ,I am looking for your solution ...Thanks for your time

Nikson Over a year ago

Can you please help me to fix this stackoverflow.com/questions/51281799/… @fromZerotoHero

Roberto Zvjerković · Accepted Answer · 2018-04-30 12:47:47Z

1

Your *ngFor directive is on the wrong element. Please look at the updated StackBlitz snippet:

https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-ptkgdm?file=app/app.component.html

answered Apr 30, 2018 at 12:47

Roberto Zvjerković

10.2k4 gold badges31 silver badges49 bronze badges

6 Comments

Nikson Over a year ago

under indian spices it shows 4 groups ,it opens first group(pepper) if I clicked on all the gruops please check it. Please click on every group under indian spices you will came to know the issue

Roberto Zvjerković Over a year ago

Sure, but that problem is unrelated to your original question. The problem you're seeing now is all of your ids (id="collapseInnerTwo", for instance) are the same for multiple elements (you are iterating over groups), so the accordion library doesn't "know" which one to target, so it targets the first one. You should probably dynamically add some kind of sufix to your ids. (id="collapseInnerTwo_{{j}}")

Nikson Over a year ago

Will post another question regarding this can you give me the solution there

Roberto Zvjerković Over a year ago

I just gave you the solution. Don't give the same id to multiple HTML elements. (id="collapseInnerTwo_{{j}}") Try to implement it yourself and feel free to ask me anything in chat if you get stuck.

Nikson Over a year ago

sure and Thanks

|

Arun Raj R · Accepted Answer · 2018-04-30 13:10:04Z

1

Use this code:

<div id="collapseTwo"  class="accordion-body collapse" style="margin-left:10px">
            <div class="accordion-inner" *ngFor='let group of data?.group; let j=index'>
                <div class="accordion" id="accordion2">
                    <div class="accordion-group">
                        <div class="accordion-heading">
                            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseInnerTwo_{{j}}">
                                {{group?.CAMD_PRGRP_DESC}}
                            </a>
                        </div>
                        <div id="collapseInnerTwo_{{j}}" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">
                            <div class="accordion-inner" *ngFor='let subgroup of group?.subgroup; let i=index'>
                                {{subgroup?.CAMD_PRSGRP_DESC}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

edited Apr 30, 2018 at 13:10

answered Apr 30, 2018 at 12:38

Arun Raj R

2,3173 gold badges16 silver badges23 bronze badges

3 Comments

Nikson Over a year ago

if I remove it ,then all the data are directly shown ,But I want to shown the data when a user clicked on it

Arun Raj R Over a year ago

@Nikson Ok, I updated the answer. pls refer it again.

Nikson Over a year ago

Please check ritaj's answer he also said the same but there also an issue please click on all groups it will open only the first group

Collectives™ on Stack Overflow

While looping API response in accordion menu data missing in Angular4

3 Answers 3

5 Comments

6 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related