Using ng-repeat in AngularJS to iterate over an array of arrays

Currently, I have a Json arraylist that contains another arraylist. My goal is to iterate over both of these arraylists and display the records in a table.

This is what I have attempted so far:

I initially tried using two ng-repeats within the same tr element, but unfortunately, it did not work as expected.

    <tr class="ng-scope"
    ng-repeat="msgcounts in pastdata"  ng-repeat="past in msgcounts.arrayList_Jsons"  >


    <td class="numeric">{{ 1}}</td>
    <td class="numeric">{{ past.aggregator}}</td>
    <td class="numeric">{{past.loadedCount}}</td>
    <td class="numeric">{{past.sentCount}}</td>
    <td>{{past.sentCount}}</td>
    <td >{{past.failedCount}}</td>
    <td class="numeric">{{past.replyCount}}</td>                                                                                                       <td class="numeric">{{msgcounts.date}}</td>

</tr>

Another approach I experimented with was creating a div inside the tr tag, hoping for a different outcome:

<tr class="ng-scope"
        ng-repeat="msgcounts in pastdata">
        <div   ng-repeat="past in msgcounts.arrayList_Jsons"  >             

        <td class="numeric">{{ 1}}</td>
        <td class="numeric">{{ past.aggregator}}</td>
        <td class="numeric">{{past.loadedCount}}</td>
        <td class="numeric">{{past.sentCount}}</td>
        <td>{{past.sentCount}}</td>
        <td >{{past.failedCount}}</td>
        <td class="numeric">{{past.replyCount}}</td>                                                                        

</div>

       <td class="numeric">{{msgcounts.date}}</td>
<tr>

Provided below is an example set of data:

{
[
{date1,[{1,1,1,1},{2,2,2,2}]},
{date2,[{1,1,1,1},{2,2,2,2}]},
{date3,[{1,1,1,1},{2,2,2,2}]},
]
}

I am open to any suggestions or insights on how to resolve this issue effectively.

The desired HTML output format can be visualized from the reference image here: https://i.sstatic.net/VXO39.png

Answer №1

It is not possible to set two ng-repeats on one element,

Additionally, a div cannot be a direct child of a tr.

To work around this limitation, you can try using another nested tbody tag:

<tbody ng-repeat="msgcounts in pastdata">
    <tr ng-repeat="past in msgcounts.arrayList_Jsons">
        <td class="numeric">{{1}}</td>
        <td class="numeric">{{ past.aggregator}}</td>
        <td class="numeric">{{past.loadedCount}}</td>
        <td class="numeric">{{past.sentCount}}</td>
        <td>{{past.sentCount}}</td>
        <td>{{past.failedCount}}</td>
        <td class="numeric">{{past.replyCount}}</td>
        <td class="numeric">{{msgcounts.date}}</td>
    </tr>
</tbody>

Answer №2

If your data is structured in the following way :

$scope.groupDetails = [{
        groupingNumber: '1',

        groupDetails: [{
            sequence: '1',
            text: 'test 1',
        }]
    },
             {
        groupingNumber: '2',
               groupDetails: [{
                     sequence: '1',
                     text: 'test 2',

                 }, {sequence: '2',
                     text: 'test 3', }]
             },
           {
              groupingNumber: '3',

               groupDetails: [{
                   sequence: '3',
                   text: 'test 4',
               }]
           }
    ];

When displaying it on the front end, you can use the following structure :

<div ng-repeat="grouping in groupDetails">

    <div ng-repeat = "groupSequence in grouping.groupDetails">
            <div>{{groupSequence.text}}</div>
    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I create a Discord bot command that ignores case sensitivity?

I wrote a custom "roleinfo" command for my Discord bot, but I'm struggling to make the role search case insensitive. Here is the code snippet: const Discord = require("discord.js"); module.exports.run = async (bot, message, args) => { //Me ...

Dynamic jquery panel that remains expanded while concealing the menu on large screens

The page demonstrating jquery features automatically opens a side panel on large screens and displays a logo image instead of the standard 'open panel' icon. It remains open until the screen size is reduced. Take a look at the demonstration here: ...

Leveraging JSON Data within the ASP.NET MVC Framework

Being new to this, I am in search of guidance. Currently, I have set up an ASP.NET MVC4 (beta) Mobile project and I am faced with the task of consuming a series of REST APIs. The data from these APIs is provided in JSON format. Could you please provide m ...

Ensuring the absence of values in deconstructed variables within an object

In my quest to efficiently destructure the end_time property from the this.props.auction object, I encountered the code snippet below. const {auction: {auction: {end_time}}} = this.props; The problem with this code is that the constant will be undefined ...

No data found in response from gRPC Server

Despite my efforts, the JSON object returned from a callback in my gRPC server remains empty. Following a tutorial similar to this one, I have made some modifications such as using a SQLite3 server instead of knex and focusing on the listProducts method. ...

Dynamic Webpage Content

I am currently developing a system that involves a network of sensors communicating with a Linux machine. My goal is to create a web interface that can display real-time sensor status updates and automatically refresh them whenever there is a change in sen ...

The beauty of crafting intricate forms with Angular's reactive nested

In my Angular project, I am exploring the concept of nesting multiple reactive forms within different components. For instance, I have a component called NameDescComponent that includes a form with two inputs - one for name and one for description, along ...

Can you provide me with the URL for the jQuery post function?

Could someone please clarify which URL I should use in the $.post call to the server for a node.js file? Most tutorials demonstrate with PHP files, but I'm unsure about calling node.js files. Should I post it to the app.js file or the route file? Thi ...

Learn how to smoothly transfer a URL from JavaScript to HTML and initiate the download process

I created a website that solely relies on HTML5, CSS and JavaScript to function. The core functionality of this website involves utilizing YouTube URLs. I have stored the URL of a specific YouTube video as a variable, now I am looking for a way to transfer ...

Determine the frequency of a specific key in an array of objects

original array: ................ [ { from: {_id: "60dd7c7950d9e01088e438e0"} }, { from: {_id: "60dd7c7950d9e01088e438e0"} }, { from: {_id: "60dd7e19e6b26621247a35cd"} } ] A new array is created to count the instances of each ...

Retrieve the following row after locating the ID in the search results

Here is an example of an HTML form: <form action="search.php" method="get"> <label>Name: <input type="text" name="keyname" /> </label> <input type="submit" value="Search" /> </form> When I try to search, it displays th ...

How can I address the issue of the Ionic ng-class function being activated by every ng-click event within the application

In my ionic list, I am using a function called getClass() to retrieve the class name for each iteration. However, this getClass() function is triggered not only when the list is populated, but also whenever there is an ng-click event in the app. For exampl ...

What is the process of instantiating controller components in AngularJS?

Here is an example of my controller in AngularJS. angular.module('homePage').controller('buttonViewCtrl', [function() { console.log(this); this.buttonDisplay = false; console.log(this); this.nav = function() { ...

The HTTP request returned an error with status code 400

I am facing an issue while trying to post an object from the backend - I always receive error 400. I am not sure if the problem lies in the front-end or the backend: Here is the index.html code snippet: <div ng-controller="signupCtrl"> ...

Tips on preserving a dynamic web page within a Cordova application

I have developed a project and To Do list App that operates on a single HTML page with just an "add To Do list" button. Users can click on this button to create a To Do list and add tasks within it, all of which are dynamically generated as HTML elements. ...

"Null" is the value assigned to a JavaScript variable

I am encountering an issue on line 30 with the $.each(data.menu, function (). The console is indicating that "data is null". Can someone clarify what's happening? Thank you! function getFoodMenuData () { var url = 'http://localhost:88 ...

Click on a div in AngularJS to be directed to a specific URL

I'm currently working on developing an Angular mobile app and I want to be able to navigate to a specific URL, like www.google.com, when a particular div is clicked. Unfortunately, I'm still new to the world of Angular and struggling to achieve t ...

Verifying child attributes within a collection using AngularJS expressions

Is there a way to write an angular expression that can check each child item in a list and return true if any child has a specific property value? My issue involves a chart legend generated by an ng-repeat expression. I want the wrapping element to be sho ...

Hide the form field upon button click

I currently have a form with 6 input fields all under the same id entry1. Whenever I click the Add Section button, these fields are cloned and added to the form. There is also a button for removing the section above. The issue arises when I click on the R ...

Combining multiple Vue components into a single package or file

If I wanted to create a UI Package, is there a way to consolidate multiple components into one JS file? Usually, each component would be stored in different files like this: import ButtonText from '../ButtonText.vue' import ButtonIcon from &apos ...