Json object iteration Angular 2

Question

I am having problem iterating to through json object.

Here is the Json sample:

floors.ts

this.floors= [
      {
            floorName: "floor 1",
            result: [
                {
                    resFloor: "1",
                    floorResult: [
                        {
                            roomNum: "room 1",
                            roomResult: [
                                {
                                    bedNum: "1"
                                },
                                {
                                    bedNum: "2"
                                },
                                {
                                    bedNum: "3"
                                }
                            ],
                        },
                        {
                            roomNum: "room 2",
                            roomResult: [
                                {
                                    bedNum: "1"
                                },
                                {
                                    bedNum: "2"
                                },
                                {
                                    bedNum: "3"
                                }
                            ],
                        },
                        {
                            roomNum: "room 3",
                            roomResult: [
                                {
                                    bedNum: "1"
                                },
                                {
                                    bedNum: "2"
                                },
                                {
                                    bedNum: "3"
                                }
                            ],
                        },
                    ],
                }
            ],
        }
  ]

floor-template.html

<button *ngFor="let i of floors">
{{i.floorName}}
<div *ngIf="clicked">
  <button *ngFor="let j of i.result">
    {{j.resFloor}}
    <div *ngIf="clicked">
      <button *ngFor="let k of j.floorResult">
        {{k.roomNum}}
      </button>
    </div>
  </button>
 </div>

What I am trying to do is that I want to iterate through this json. In ngIf, clicked is boolean and if it is set to true then it gives me result for all ngFor loops and then it gives me an error; and if it is set to false then nothing comes up except the result of 1st for loop and then that button is doing nothing. What am I doing wrong. Please point into the right direction. Thanks!!

@Amit I am getting this error EXCEPTION: Cannot read property 'floorResult' of undefined — Nick King
– Nick King, Commented Mar 6, 2017 at 15:45
Hmm, I suggest commenting out the problematic ngFor and outputting {{j | json}} and see what it looks like from inside the ngFor. Let me know if it looks different than it should (or not) — Amit
– Amit, Commented Mar 6, 2017 at 15:59

Chris Sharp · Accepted Answer · 2017-03-06 16:10:20Z

2

Your condition is not working correctly. This works for me on the first click. (I have went no further)

HTML

 <button *ngFor="let i of floors" (click)="wasClicked()">
        {{i.floorName}}
        <div *ngIf="clicked === true">
            <button *ngFor="let j of i.result">
                {{j.resFloor}}
                <div *ngIf="clicked">
                    <button *ngFor="let k of j.floorResult">
                        {{k.roomNum}}
                    </button>
                </div>
            </button>
        </div>
    </button>

Typescript - declare a clicked variable and write this function

wasClicked() {
    this.clicked = true;
    console.log('clicked: ' + this.clicked);
}

answered Mar 6, 2017 at 16:10

Chris Sharp

1,9951 gold badge21 silver badges32 bronze badges

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

3 Comments

Nick King Over a year ago

Hey, so I got all the button using your name method but do you know how can I do this: if I click on the floorName button only then the resFloor for loop should run and this should happen in the rest of the for loop. Thanks

Chris Sharp Over a year ago

I'm not 100% sure what you're going for but try this. It only displays a box with a one when floor1 is clicked and then if that box is clicked it displays the rooms. You will need to declare another boolean and another wasClicked() function. <button *ngFor="let i of floors" (click)="wasClicked()"> {{i.floorName}} <div *ngIf="clicked === true"> <button *ngFor="let j of i.result" (click)="wasClicked2()"> {{j.resFloor}} <div *ngIf="clicked2 === true"> <button *ngFor="let k of j.floorResult"> {{k.roomNum}} </button> </div> </button> </div> </button>

Chris Sharp Over a year ago

Did this do what you needed?

Alejandro Lora · Accepted Answer · 2017-03-06 16:14:14Z

0

You are iterating in a wrong way, because you might think that you second loop depends of the first one but not, they are different, so when you tried to access the second loop, i is equal to undefined.

Try something like this

<div *ngFor="let i of floors">
    {{i.floorName}}
    <div *ngIf="clicked">
        <div *ngFor="let j of i.result">
            {{j.resFloor}}
            <div *ngIf="clicked">
                <span *ngFor="let k of j.floorResult">{{k.roomNum}}</span>
            </div>
        </div>
    </div>
</div>

also, I changed the html elements as you were using them incorrectly, button shouldn't contain div elements.

edited Mar 6, 2017 at 16:14

answered Mar 6, 2017 at 16:07

Alejandro Lora

7,8923 gold badges20 silver badges36 bronze badges

Collectives™ on Stack Overflow

Json object iteration Angular 2

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related