How to handle array in angular js/HTML

Question

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?

Json Output is what i got when i tried in PostMan for my Get Resource. I just added to show how cast will be..... — Vino Spartan
– Vino Spartan, Commented Mar 21, 2015 at 17:08

dfsq · Accepted Answer · 2015-03-21 17:07:22Z

2

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).

answered Mar 21, 2015 at 17:07

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Danny · Accepted Answer · 2015-03-21 17:04:31Z

2

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>

answered Mar 21, 2015 at 17:04

Danny

1,7583 gold badges23 silver badges36 bronze badges

5 Comments

André Dion Over a year ago

Your solution is sound, but you've missed the typos that @dfsq caught in his answer.

Danny Over a year ago

Well, I saw them, but since he was specifically asking about the Cast field I thought maybe he was translating the fields when he got the object back. It's also possible that the whole thing was blank and he was just chalking it up to a problem with the Cast.

André Dion Over a year ago

$scope.Movies = pl.data Nope.

Danny Over a year ago

Glad to help, but it sounds like your larger problem was the mis-named properties?

Vino Spartan Over a year ago

No still to go...its one of it......@Danny Have to implement cache in my web api.....I've got results from Cache when same request passed but i'm getting header as same as 200(OK) instead of 304

Collectives™ on Stack Overflow

How to handle array in angular js/HTML

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related