Building AngularJS variable name during ng-repeat

Question

I have a set of items that come in as follows. (I have no control over the variable's name)

pubDate0, pubDate1, pubDate2

They are accessed like so

<div>
   <i>
      {{newsData.pubDate0[0]}}
   </i>
</div>
<div>
   <i>
      {{newsData.pubDate1[0]}}
   </i>
</div>
<div>
   <i>
      {{newsData.pubDate2[0]}}
   </i>
</div>

Is there anyway to concatenate this variable name using ng-repeat so that I do not have to write all of this repetitive code?

I have tried the following inside a ng-repeat, and many more similar combinations.

<p ng-repeat="t in getTimes(10) track by $index"> //force looped 10 times
    {{(newsData.pubDate+$index+[0])}}
</p>

//Tried the following as well
{{(newsData.pubDate+$index+[0])}}
{{('newsData.pubDate'+$index+[0])}}
{{('newsData.pubDate'+$index+'[0]')}}
{{newsData.pubDate+$index+[0]}}
{{newsData.pubDate+($index)+[0]}}
{{newsData.pubDate+{{$index}}+[0]}}
{{newsData.pubDate($index)[0]}}
{{newsData.pubDate$index[0]}}
{{newsData.pubDate{{$index}}[0]}}
{{newsData.pubDate+$index+[0]}}

Running out of guesses. :(

Why is the index part of the variable name to begin with? I would address that first. — escargot agile
– escargot agile, Commented Apr 11, 2015 at 18:28
@IlyaKogan No control over that, hence why I am trying to just build it in with $index. — Austin
– Austin, Commented Apr 11, 2015 at 18:28
@NewDev My bad, I added some clarification. For the ng-repeat to work, I would have to force loop it, as I am giving a poorly formatted json with no inner arrays. So force loop 10 times, in which I have to manually write 10 blocks of code to show the data. Trying to using $index to just build the variable name instead. — Austin
– Austin, Commented Apr 11, 2015 at 18:36

Amir Popovich · Accepted Answer · 2015-04-11 18:35:57Z

1

You have two ways to access a js property:

var obj = {prop1: 'p1', prop2: 'p2'};
console.log(obj.prop1); //p1

var propName = 'prop';
var index = 1;
console.log(obj[propName + index]); //p1

Simply, use the second way:

newsData['pubDate'+$index][0];

JSFIDDLE.

answered Apr 11, 2015 at 18:35

Amir Popovich

30.1k9 gold badges58 silver badges102 bronze badges

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

1 Comment

Austin Over a year ago

Sir, you have my most sincere gratitude! (will accept when timer expires) Thank you for the Javascript informational as well!

Onur Topal · Accepted Answer · 2015-04-11 18:59:41Z

You can achieve simply using new Array(10) if you know the length see the below code;

//Controller:
$scope.getTimes = function(x) {
   return new Array(x);
}

<p ng-repeat="t in getTimes(10) track by $index"> //force looped 10 times
    {{(newsData['pubDate'+$index][0])}}
</p>

But I would convert the data the way I wanted just before resolving the promise (or assigning the data to the scope) and if you use the data all over your application I definitely suggest that.

Assuming the below code is your service call;

        var getAllNews = function() {
            var deferred = $q.defer();

            $http.get('/api/news')
            .success(function (resultNews) {
                var pubDates = []; //will be new pubDate array
                for (var key  in resultNews) {
                   //check if it is a pubDate
                   if (key.indexOf("pubDate") === 0) {
                      pubDates.push(resultNews[key]); // add it to array
                      delete resultNews[key]; // remove from the object
                   }
                }
                //finally assign new array as a property of result
                resultNews.pubDates = pubDates;
                deferred.resolve(resultNews);
            });

            return deferred.promise;
        };

But the second approach might have some problem related to order of items as browsers new promise to return them in order (even they are).

Collectives™ on Stack Overflow

Building AngularJS variable name during ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related