How can I correctly use variable variable names in ng-repeat in angular?

Question

HTML:

<ul>
  <li ng-repeat="comic in comiclist"> 
    <span>{{ comic.title }} : {{comic.id}}</span>
    <div >
      <img ng-src="{{comic.thumbnail.path}}.{{comic.thumbnail.extension}}"/>
    </div>          
    <div>
      <ul>
        <li ng-repeat="character in charlist + {{comic.id}}">    
          <span>{{character.name}}</span>
        </li>
      </ul> 
    </div>
  </li>
</ul>

JS with angular

var App = angular.module('MarvelApp', []);
  App.controller('MainController', function($scope,$window, $http) {
      $scope.GetSeries = function(){
        $http.get('http://gateway.marvel.com/v1/public/series?')
        .then(function(response){
        $scope.serieslist = response.data.data.results;
        });
      };
    $scope.GetComics = function(){
      $http.get('http://gateway.marvel.com/v1/public/series/' + $scope.selectedseries + '/comics?')
      .then(function(response){
          $scope.comiclist = response.data.data.results;
      });
      //comic in comiclist contains comic.id
      //which needs to go to GetCharacter()
    }
    $scope.GetCharacter = function(comicid){
      $http.get('http://gateway.marvel.com/v1/public/comics/' + comicid + '/characters')
      .then(function(response){
          $scope.['charlist' + comicid]  = response.data.data.results;
       //this list needs to be displayed in the second ng-repeat
      });
    };
  });

I'd like to get the character list to display in the right div. How I had it set up before, (without $scope.['charlist' + comicid]) it was overriding the other ng-repeats too.

Also, whenever GetComics() gets called it does it automatically.

Patrick Barr · Accepted Answer · 2017-06-06 20:29:14Z

1

I don't think $scope.[] is valid syntax (unless I've been missing out on a nifty trick).

You should instead name an "associative array" under $scope something like:

$scope.charlist[comicid] = ... ;

Your ng-repeat would then look something like:

<li ng-repeat="character in charlist[comic.id]">

EDIT As mentioned in the comments, $scope.charlist must be defined before the above lines can be used. This can happen in a few ways:

Make a check before you set it: if(!$scope.charlist) $scope.charlist = [];
Define it somewhere in the controller with $scope.charlist = [];

Of course there's any number of ways you can do this, but these make these I believe make the most sense, the first of which catches invalid states i.e. if for some reason $scope.charlist is set to null it would create a new "associative array".

edited Jun 6, 2017 at 20:29

answered Jun 6, 2017 at 19:36

Patrick Barr

1,1137 silver badges17 bronze badges

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

2 Comments

KevHau Over a year ago

"angular.js:13920 TypeError: Cannot set property '60151' of undefined" is this the error i get now on $scope.charlist[comicid] = ...; 60151 being the comicid

Paurian Over a year ago

Technically, JavaScript doesn't have associative arrays. Think of it as an (array) object that needs instantiation. Add the line "$scope.charlist = [];" at the top of your controller. Then later references to $scope.charlist[comicid] = .... should work.

Collectives™ on Stack Overflow

How can I correctly use variable variable names in ng-repeat in angular?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related