Angularjs - Render complex object using ng-repeat

Question

Here is my example data from server :

{
    "name": [
        "01.Song name ",
        "02 .Song name "
    ],
    "url": [
        "1.url",
        "2. url"

    ]
}

and here is the controller :

hiren.controller('hirenz' , function($scope , $http , $location , $routeParams){
    $http.post((rootURL + "music") , {'alpha' : $routeParams.alpha , 'name' : $routeParams.name ,
        'album' : $routeParams.albumname }).success(function(data){
        $scope.groups= data ;

    });
// some other code
});

and the partial that is not working :

<table class="table" >
    <tr>
        <th>Select Song</th>
    </tr>
<tr ng-repeat="x in groups" >
    <td>
        <a  ng-click="x.url" class="button ">
            <span class="glyphicon glyphicon-user"> {{ x.names }}</span>
        </a>
    </td>
</tr>
</table>

My problem is how do I repeat and render url and name in ng-click="" and {{ names }} ?

JB Nizet · Accepted Answer · 2014-01-24 07:18:04Z

3

The problem is with the data. It would be much easier if the data was not using two parallel arrays of strings, but a single array of objects instead:

[
    {
        "name": "01. song name",
        "url": "01. url"
    },
    {
        "name": "02. song name",
        "url": "02. url"
    }
]

That way, you could easily use ng-repeat to loop through this array and, at each iteration, display the song name and the song url.

If you can't change the data coming from the server, then change it in your controller and expose the transformed data in the $scope, instead of exposing the data coming directly from the server.

answered Jan 24, 2014 at 7:18

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Comments

Chandermani · Accepted Answer · 2014-01-24 07:18:21Z

3

Something like

<tr ng-repeat="url in groups.url" >
    <td>
        <a  ng-click="url" class="button ">
            <span class="glyphicon glyphicon-user"> {{ groups.names[$index] }}</span>
        </a>
    </td>
</tr>

answered Jan 24, 2014 at 7:18

Chandermani

42.7k12 gold badges88 silver badges89 bronze badges

Collectives™ on Stack Overflow

Angularjs - Render complex object using ng-repeat

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related