Constructing variable names in AngularJS while using ng-repeat

Question

Constructing variable names in AngularJS while using ng-repeat

I am working with a series of items that are structured as described below. Unfortunately, I do not have control over the variable names.

pubDate0, pubDate1, pubDate2

To access them, I currently use the following format:

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

Is there a way to concatenate these variable names using ng-repeat in order to avoid writing repetitive code?

I have attempted various approaches within an ng-repeat loop, but none have been successful.

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

//Some of the attempts made:
{{(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]}}

Feeling somewhat stuck at this point. :(

javascript angularjs

Answer 1

Answer №1

There are a couple of methods to access a JavaScript property:

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

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

It is recommended to use the second approach:

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

JSFIDDLE.

Answer 2

There are a couple of methods to access a JavaScript property:

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

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

It is recommended to use the second approach:

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

JSFIDDLE.

Answer 3

Answer №2

If you want to easily achieve this, simply use new Array(10) if you already know the length. See the code below:

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

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

However, I recommend converting the data the way you prefer before resolving the promise or assigning it to the scope, especially if you plan on using the data throughout your application.

If the following code represents 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;
        };

It's worth noting that the second approach may have issues with the order of items due to browsers not promising to return them in order, even if they are.

Answer 4

If you want to easily achieve this, simply use new Array(10) if you already know the length. See the code below:

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

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

However, I recommend converting the data the way you prefer before resolving the promise or assigning it to the scope, especially if you plan on using the data throughout your application.

If the following code represents 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;
        };

It's worth noting that the second approach may have issues with the order of items due to browsers not promising to return them in order, even if they are.

Constructing variable names in AngularJS while using ng-repeat

Answer №1

Answer №2

Similar questions

Getting the highest level object in a nested Angular component structure

Is it recommended to rely on Javascript for altering the content of a div across an entire website?

An error has occurred with TokBox: OT.Session is unable to connect because the session has already been declared as

I would like the capability to choose a roster of gods depending on a character's class and moral orientation

modify the navigation when router events are triggered

How do I easily show/hide a submenu in AngularJS with a toggle menu?

What is the mechanism behind the jQuery ready function that enables its first parameter to transform into a jQuery object?

Variable Returned by AJAX

I attempted to generate a 3x3 matrix and use ng-repeat to display the data, but unfortunately, the code is

Unusual perspective of JSON with ng-jsoneditor in AngularJS

Is it possible to interact with a particular point or element within a canvas using languages like javascript, jquery, or selenium?

Highlight the parent item when the child item is being hovered over

Switch up the side navigation panel display

Creating a dedicated login page separate from the single page application structure

Invoke a separate function after a successful Ajax request

Resolving issues with JavaScript caused by Polymer updates

What is the method for incorporating choices into a schema field in Mongoose?

Using Python Selenium to create a login page with Javascript

Simplified user interface for detecting radio button clicks

"Obtain permission from Azure Graph to fetch details for a specific user using their principal