How to create a nested ng-repeat from nested JSON array data on button click

Question

Using the following JSON as an example and assuming I have set this data equal to $scope.people:

[
    {
        "personId": 1,
        "name": "Thomas",
        "age": 39
        "friends": [
            {
                "friendId": 1,
                "nickName": "Lefty"
            },
            {
                "friendId": 2,
                "nickName": "Morty"
            },
            {
                "friendId": 3,
                "nickName": "Gomer"
            }
        ]
    },
    {
        "personId": 2,
        "name": "George",
        "age": 27,
        "friends": [
            {
                "friendId": 1,
                "nickName": "Tommy"
            },
            {
                "friendId": 2,
                "nickName": "Bobby"
            },
            {
                "friendId": 3,
                "nickName": "Joe"
            }
        ]
    }
]

I'm dynamically creating buttons for each person.

<div class="form-group" data-ng-repeat="person in people">
    <button type="button" class="btn btn-default form-control"
        data-ng-click="friends(person.personId)">
            {{person.name}}
    </button>
</div>

What I'm trying to figure out is how to load the object data into Bootstrap panel (see HTML below) depending on the button clicked:

<div class="panel panel-primary" data-ng-hide="!friends">
    <div class="panel-heading">
        <h4 class="panel-title">{{person.name}}<span class="pull-right">{{person.age}}</span></h4>
    </div>
    <div class="panel-body">
        <table class="table table-striped">
            <tr data-ng-repeat="friend in person.friends">
                <td>{{$index + 1}}</td>
                <td>{{friend.nickName}}</td>
            </tr>
        </table>
    </div>
</div>

I was thinking that on my controller, I set a $scope variable = the friends array ($scope.friends), but I'm unsure how exactly to do that based on personId.

Cédric · Accepted Answer · 2014-12-03 20:05:55Z

1

You need to create a $scope variable that holds the selectedPerson and assign the correct person to the selected person when clicking the button

$scope.SelectMe = function (p) {
        $scope.selectedPerson = p;
    }

You can then reference the selectedPerson when populating your panel

I have put together a quick fiddle for you. http://jsfiddle.net/cseignc/wt8w01b4/

Let me know if this is what you needed.

answered Dec 3, 2014 at 20:05

Cédric

1802 silver badges12 bronze badges

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

1 Comment

Florian Over a year ago

true but he wanted to do it using id doesn't he?

Florian · Accepted Answer · 2014-12-03 19:57:29Z

0

you can use a dictionary instead of array: use indexBy() function from underscore.js http://underscorejs.org/#indexBy

then you can do something like

$scope.peopleById = _.indexBy(people, "personId");

and in the html file

<tr data-ng-repeat="(id, friend) in person.friends">
<!-- here you can do peopleById[id] -->

answered Dec 3, 2014 at 19:57

Florian

8557 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to create a nested ng-repeat from nested JSON array data on button click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related