Arrays in Angular JS

Question

Am new to angular JS, I am pushing elements in an array and then want to display in the html using ng-repeat.

$scope.groupedMedia = [];

//Adding elements through a for loop.

$scope.groupedMedia[year].push(response.resources[i]);

console.log($scope.groupedMedia);

//The above console displays the following,

//[2014_January: Array[5], 2013_December: Array[95]]

So in my HTML,

<div ng-repeat="group in groupedMedia">
<div ng-repeat="file in group">
<p>{{file.lastModified}}</p>
</div></div>

I observe that the groupedMedia array in the html is empty and hence not displaying any data. I also need to display the items in the array in the same order as i push it. Any tips to solve this will be very helpful.

When iterating over an object, property order is not guaranteed.So i preferred an array. For example, December2013 data is displayed first,then January2014 is displayed later. — LS2
– LS2, Commented Jun 2, 2014 at 6:12

guru · Accepted Answer · 2014-06-02 07:52:04Z

1

Ideally groupedMedia obj has to be restructured to an year map(year as key and resources as value). Using an array for random numbers is not recommended and has to be avoided Sample JS:

$scope.groupedMedia = {};    
$scope.groupedMedia[year] = response.resources[i];    
console.log($scope.groupedMedia); //This will provide an output like below.
//{'2014_January': Array[5], '2013_December': Array[95]}

In html, First iteration will be though the groupMedia map. With ng-repeat one can iterate through a map and refer the key/value pair of the map in the child list. And the second one will the the resources array.

Sample HTML code:

<div ng-repeat="(group, files) in groupedMedia">
  <div ng-repeat="file in files">
    <p>{{file.name + ':  '+ file.lastModified}}</p>
  </div>
</div>

have found a way to maintain the order of the map,

First iterate through the keys array(Object.keys(map)).
Then using the key the value can be taken.

JS addition:

    $scope.groupKeys = function(data){
      return Object.keys(data);
    }

HTML addition:

<div ng-repeat="key in groupKeys(groupedMedia)">
    {{key}}
    <div ng-repeat="file in groupedMedia[key]">
      <p>{{file.name + ':  '+ file.lastModified}}</p>
    </div>
  </div>

I have update the plunker to reflect the same. Though would be really interested to know if there is an alternate way. Sample Demo: http://plnkr.co/edit/JfqIoZMQmFz2cwFvce2K?p=preview The above plunker has a demo with the above code. Have a look and let me know if it helps.

edited Jun 2, 2014 at 7:52

answered Jun 2, 2014 at 7:15

guru

4,0221 gold badge31 silver badges33 bronze badges

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

4 Comments

LS2 Over a year ago

Yes. This partly solves my problem. As i have to implement a timeline wrapper i need the 2014 files to be displayed on first and then 2013 files and hence forth.

guru Over a year ago

Its surprising, looks like non-array collections are sorted by ng-repeat based on the key. I guess js iterator does not guarantee the order in which the keys will be iterated, so looks like a decision from angular to sort by keys. Let me see whether there can be a workaround to maintain the map order.

guru Over a year ago

have updated the plunker with a work around. though would be interested to find out whether there is an alternate way of doing this.

LS2 Over a year ago

Yes. Works. It answers all my queries. If i get to know any alternate way, will let u know.. Thanks again.

chovy · Accepted Answer · 2014-06-02 06:14:16Z

0

Try this:

$scope.groupedMedia.push({ year: year, response: response.resources[i] });

Now you can do .year and .response

answered Jun 2, 2014 at 6:14

chovy

76.2k63 gold badges249 silver badges324 bronze badges

3 Comments

LS2 Over a year ago

Yes, this displays me results. But year index is mapped to object response. I need to group years as well. for ex: {[2014]:[object 1,object 2],2013[object 1,object2...]

chovy Over a year ago

you should not be using a year as an index to an array. If you want to use the year as a key, you could do this: var obj = {}; obj[year] = response; array.push(obj)

LS2 Over a year ago

i need the 2014 files to be displayed on first and then 2013 files and hence forth. i think this is make 2013 to b displayed first in html

Collectives™ on Stack Overflow

Arrays in Angular JS

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related