CODEWITHSUNDEEP
angularjs
pyprism
pyprism

Reputation: 3008

Angularjs - Render complex object using ng-repeat

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 }} ?

Upvotes: 0

Views: 1719

Answers (2)

Chandermani
Chandermani

Reputation: 42669

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>

Upvotes: 3

JB Nizet
JB Nizet

Reputation: 691835

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.

Upvotes: 3

Related Questions