CODEWITHSUNDEEP
javascripthtmlangularjsmodel-view-controllerasp.net-web-api
Vino Spartan
Vino Spartan

Reputation: 83

How to handle array in angular js/HTML

I'm using a Web API to display values in HTML via Angular.

I have 4 attributes: Id, MovieName, Date and Cast. Cast is an array. I don't know how to handle the Cast attribute.

Controller.js

app.controller('MyController', function ($scope, MyService) {

$scope.getemploy = function () {
    var promise = MyService.getMovies();
    promise.then(function (pl) {
        $scope.Movies= pl.data
    },
    function (error) {
        $log.error('Some Prob', error);
    });
}

GetMovies()--> will bring movie details(Cast attribute will have male, female lead names in the array).

HTML File :

 <tr ng-repeat="mov in Movies">
   <td>{{mov.Id}}</td>
   <td>{{mov.MovieName}}</td>
   <td>{{mov.Date}}</td>
   <td>{{mov.Cast}}</td>
 </tr>

But it's not working. I think I'll need some other way to handle Cast attributes, whether in html or angular.

My Json output for your reference:

[
{
    "_movieId": 1,
    "_moviename": "Olympus Has Fallen",
    "_releaseDate": 2013,
    "_cast": [
        "Gerard Butler",
        "Dylan McDermott",
        "Aaron Eckhart",
        "Angela Bassett"
    ]
}

Can anyone please help?

Upvotes: 0

Views: 160

Answers (2)

dfsq
dfsq

Reputation: 193261

But its not working....

Because according to posted JSON your receive, HTML should be with different keys. Try this:

<tr ng-repeat="mov in Movies">
   <td>{{mov._movieId}}</td>
   <td>{{mov._moviename}}</td>
   <td>{{mov._releaseDate}}</td>
   <td>{{mov._cast.join(', ')}}</td>
 </tr>

I used simple join method of array to render comma separated list of actors. If you need something more specific, you will need to make use of one more ngRepeat on mov._cast array (see Danny's answer).

Upvotes: 2

Danny
Danny

Reputation: 1759

I'm not sure what you mean by the Cast is not working, but I'm guessing it's just showing the JSON object in the HTML? You could show all the cast members in a list doing something like:

<tr ng-repeat="mov in Movies">
   <td>{{mov.Id}}</td>
   <td>{{mov.MovieName}}</td>
   <td>{{mov.Date}}</td>
   <td>
       <ul>
           <li ng-repeat="member in mov.Cast">{{ member }}</li>
       </ul>
   </td>
 </tr>

Upvotes: 2

Related Questions