Displaying multiple arrays using ng-repeat

Question

Displaying multiple arrays using ng-repeat

My task is to display a list organized by date, but the problem is that the list is not sorted and I can't figure out when the date changes. This situation is similar to having the following Json:

list = 
{name: first, date: 2014-05-21}, {
{name: second, date: 2014-05-20}, {
{name: third, date: 2014-05-21}

I want to generate the corresponding html structure:

<li><h3>2014-05-21</h3>
 <ul>
  <li>first</li>
  <li>third</li>
 </ul>
</li>
<li><h3>2014-05-20</h3>
 <ul>
 <li>second</li>
 </ul>
</li>

Any suggestions on how to achieve this?

I attempted to create an Array of arrays using two ng-repeat loops like so:

for (i in list){
 if ($scope.listToShow[list.date] == undefined) {
     $scope.listToShow[list.date] = newArray();
 }
 $scope.listToShow[list.date].push(list[i]); 
}

However, I'm struggling to actually display the result.

javascript arrays angularjs angularjs-ng-repeat

Answer 1

Answer №1

Take a look at this helpful article, it explains exactly what you need to do.

For another approach, you can utilize the built-in directives

ng-repeat-start and ng-repeat-end

to accomplish the same result. Check out this link for more information.

Answer 2

Take a look at this helpful article, it explains exactly what you need to do.

For another approach, you can utilize the built-in directives

ng-repeat-start and ng-repeat-end

to accomplish the same result. Check out this link for more information.

Answer 3

Answer №2

I was able to create a functional example. It may not be very advanced and there is room for improvement, but you can grasp the basic concept by examining the code. The key is to organize your data (without using any fancy Angular features, just plain old JavaScript) and then present the organized data in the view. I had to maintain a keys property for the grouped object because it seems that AngularJS views do not support Object.keys(obj).

You can check it out here

EDIT: I have updated it with the (key,obj) in grouped syntax, eliminating the need for the keys array.

Answer 4

I was able to create a functional example. It may not be very advanced and there is room for improvement, but you can grasp the basic concept by examining the code. The key is to organize your data (without using any fancy Angular features, just plain old JavaScript) and then present the organized data in the view. I had to maintain a keys property for the grouped object because it seems that AngularJS views do not support Object.keys(obj).

You can check it out here

EDIT: I have updated it with the (key,obj) in grouped syntax, eliminating the need for the keys array.

Answer 5

Answer №3

Exploring an array of arrays within a table led me to some interesting results, although my approach may not be the most efficient.

//controller
$scope.list = [
    [
        {name: 'first', date: '2014-05-21'},
        {name: 'lala', date: '2014-07-32'},
        {name: 'fada', date: '2014-07-32'}
    ], 
    [
        {name: 'second', date: '2014-05-20'},
        {name: 'dada', date: '2014-54-32'},
        {name: 'mama', date: '2014-07-32'}
    ], 
    [
        {name: 'third', date: '2014-05-21'},
        {name: 'nana', date: '2014-78-32'},
        {name: 'rara', date: '2014-07-32'}
    ]
];

//view
<table>
    <tr class="parent" ng-repeat-start="(key, item) in list">
        <td>{{ item[0].name }}</td>
        <td>{{ item[0].date }}</td>
    </tr>
    <tr class="child" ng-repeat-end="", ng-repeat="part in list[key].slice(1, list[key].length)">
        <td>{{ part.name }}</td>
         <td>{{ part.date }}</td>
    </tr>
</table>

Answer 6

Exploring an array of arrays within a table led me to some interesting results, although my approach may not be the most efficient.

//controller
$scope.list = [
    [
        {name: 'first', date: '2014-05-21'},
        {name: 'lala', date: '2014-07-32'},
        {name: 'fada', date: '2014-07-32'}
    ], 
    [
        {name: 'second', date: '2014-05-20'},
        {name: 'dada', date: '2014-54-32'},
        {name: 'mama', date: '2014-07-32'}
    ], 
    [
        {name: 'third', date: '2014-05-21'},
        {name: 'nana', date: '2014-78-32'},
        {name: 'rara', date: '2014-07-32'}
    ]
];

//view
<table>
    <tr class="parent" ng-repeat-start="(key, item) in list">
        <td>{{ item[0].name }}</td>
        <td>{{ item[0].date }}</td>
    </tr>
    <tr class="child" ng-repeat-end="", ng-repeat="part in list[key].slice(1, list[key].length)">
        <td>{{ part.name }}</td>
         <td>{{ part.date }}</td>
    </tr>
</table>

Displaying multiple arrays using ng-repeat

Answer №1

Answer №2

Answer №3

Similar questions

Angular deep nested router interface

Achieving Vertical Centering of Text in Bootstrap 5 Buttons with Flex Box to Prevent Overlapping Icons

What is the most efficient way to insert values into a multidimensional array?

Validating Date Input in HTML and JavaScript Text Fields

What is the proper way to add a line break within a Custom JSX Tag that is imported from a different class in the code

Issue with jQuery 'on' event not triggering following 'load' event

Disabling eslint does not prevent errors from occurring for the unicorn/filename-case rule

Creating an engaging Uikit modal in Joomla to captivate your audience

Angular method for toggling panels open and closed

Populate the div with the URL parameter only when another span element is empty after a specified time interval using setTimeout

Refresh the webpage source code for an AJAX request

What is the best way to showcase hexadecimal values of a byte array?

Use a filter to narrow down results based on a column containing comma-separated values, as well as another specified

Share user group Node Express with relevant data

Evaluating QUnit Test Cases

Struggling to make EJS button functional on the template

The Javascript eval method throws a ReferenceError when the variable is not defined

Steps for detecting a 401 Unauthorized error in SignalR when the token has expired

I'm looking to replicate this navigation layout using Vuetify's 'navigation drawer' component. How can I go about doing this?

Is there any trouble with this controller method?