AngularJS ng-repeat nested loop allows you to iterate through an array

I am currently working with the following JSON data:

{ "ListNhomThanhTra": [
    {
        "ListKeHoachThanhTra": [
            {
                "ListDoiTuong": [
                    {
                        "MA_DV_DUOC_TT": "DT01",
                        "TEN_DOITUONG": "Tỉnh Bắc Ninh",
                        "stt": 1.1
                    }
                ],
                "MA_DM_KEHOACH_TT": "KH13072018003",
                "TEN_KEHOACH": "Kế hoạch chính thức",
                "stt": 1
            }
        ],
        "MA_NHOM_TT": "010",
        "TEN_NHOM": "Thanh tra ngân sách địa phương",
        "stt": "I"
    },
    {
        "ListKeHoachThanhTra": [
            {
                "ListDoiTuong": [
                    {
                        "MA_DV_DUOC_TT": "DT01",
                        "TEN_DOITUONG": "Tỉnh Bắc Ninh",
                        "stt": 1.1
                    }
                ],
                "MA_DM_KEHOACH_TT": "KH13072018003",
                "TEN_KEHOACH": "Kế hoạch chính thức",
                "stt": 1
            }
        ],
        "MA_NHOM_TT": "02",
        "TEN_NHOM": "Thanh tra tài chính, bộ ngành",
        "stt": "II"
    }
],
"MA_LOAI_TT": "01",
"TEN_LOAI": "Kế hoạch thanh tra",
"stt": "A"
}

Given this JSON string, I want to present it in tabular format.

I attempted to render the data using the code snippet below, but encountered an issue where it stops at the second ng-repeat. I need assistance on how to resolve this problem and display the complete table correctly:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
 <tbody ng-repeat="loaiThanhTra in dataTable">                                                                    
        <td>{{loaiThanhTra.stt}}</td>
        <td>{{loaiThanhTra.TEN_LOAI}}</td>

     <tr ng-repeat="nhomThanhTra in loaiThanhTra.ListNhomThanhTra">
        <td>{{nhomThanhTra.stt}}</td>
        <td>{{nhomThanhTra.TEN_NHOM}}</td>
         <tr ng-repeat="keHoachThanhTra in nhomThanhTra.ListKeHoachThanhTra ">
            <td>{{keHoachThanhTra.stt}}</td>
            <td>{{keHoachThanhTra.TEN_KEHOACH}}</td>    
             <tr ng-repeat="doiTuongThanhTra in keHoachThanhTra.ListDoiTuong">
                <td>{{doiTuongThanhTra.stt}}</td>
                <td>{{doiTuongThanhTra.TEN_DOITUONG}}</td>        
             </tr>
         </tr>
    </tr>                             
 </tbody>

Your help is greatly appreciated!

Answer №1

To avoid having trs in tds, consider using ng-container and row spans on the parent objects.

<tbody ng-repeat="loaiThanhTra in dataTable">
  <td>{{loaiThanhTra.stt}}</td>
  <td>{{loaiThanhTra.TEN_LOAI}}</td>

  <tr ng-repeat="nhomThanhTra in loaiThanhTra.ListNhomThanhTra">
    <td rowspan="nhomThanhTra.ListKeHoachThanhTra.length">{{nhomThanhTra.stt}}</td>
    <td rowspan="nhomThanhTra.ListKeHoachThanhTra.length">{{nhomThanhTra.TEN_NHOM}}
    </td>
    <ng-container ng-repeat="keHoachThanhTra in nhomThanhTra.ListKeHoachThanhTra ">
      <td rowspan="keHoachThanhTra.ListDoiTuong.length">{{keHoachThanhTra.stt}}</td>
      <td rowspan="keHoachThanhTra.ListDoiTuong.length">{{keHoachThanhTra.TEN_KEHOACH}}</td>
      <ng-container ng-repeat="doiTuongThanhTra in keHoachThanhTra.ListDoiTuong">
        <td>{{doiTuongThanhTra.stt}}</td>
        <td>{{doiTuongThanhTra.TEN_DOITUONG}}</td>
      </ng-container>
    </ng-container>
</tbody>

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

Activate click events when button is being held down

I'm currently working on a directive that shifts an element to the right whenever clicked. However, I want the element to keep moving as long as the button is pressed. .directive("car", function(){ return { restrict:"A", link:func ...

Issue with AngularJS compatibility on first generation iPad

Having trouble with my first generation iPad while trying to implement a basic ngRoute and ngAnimate setup. It's working fine on desktop and iPhone 6, but not on the iPad. The error message I'm encountering is: Error[$injector:modulerr]http://e ...

Tips for achieving compatibility between systemjs module loading and .net mvc architecture

Upon finding the ng-book 2, I saw it as a promising resource to delve into Angular 2. Although I am new to module loaders and have minimal experience with npm and node, I find the terminology and assumed knowledge to be quite perplexing. I decided to use ...

Angular's UI Modal: utilizing inline template and controller functionality

I am looking to create a simple confirmation box using UI-modal, which I have used successfully for more complex modals in the past that load their template and controller from external files. However, this time I want something even simpler - just a basi ...

Protractor tests are successful when run locally, but encounter failures when executed on Travis-CI

I recently integrated end-to-end tests using Protractor into my AngularJS application. Testing them locally showed that they all pass, but upon committing to GitHub and Travis for CI, most of the tests fail. The failing tests seem to be those requiring na ...

Order JSON object based on designated Array

I'm looking to organize a JSON object in a specific order, Here is the current object structure: { "you": 100, "me": 75, "foo": 116, "bar": 15 } I would like to rearrange this object in the following sequence ['me', 'foo', &apos ...

Having trouble with a JavaScript function as a novice coder

Hello, I'm still getting the hang of JavaScript - just a few days into learning it. I can't figure out why this function I'm calling isn't functioning as expected. Here's the content of my HTML page: <!doctype html> <htm ...

Error message 'Access is Denied' occurs when using Angular.js xhr.open()

Currently, I am developing an angular web application that needs to be compatible with IE10. One of the requirements is to make a cross-domain call to our enterprise salesforce server. When using Chrome (not officially supported but commonly used for devel ...

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

I'm currently facing an issue with comparing 2 arrays of objects and I couldn't find a suitable method in the lodash documentation. The challenge lies in comparing objects using different keys. private parentArray: {}[] = [ { Id: 1, Name: &ap ...

What sets apart the use of `function(){}.bind(this)` and `angular.bind(this, function() {})`

Can you highlight the difference between these two code snippets? function Ctrl($scope) { $scope.$watch(function() { return this.variable; }.bind(this), /*...*/); } and function Ctrl($scope) { $scope.$watch(angular.bind(this, functio ...

OpenLayers had trouble handling the mouse event in Ionic

I am attempting to handle a double mouse click event on OpenStreetMaps by utilizing the code below: const map = new OpenLayers.Map("basicMap"); const mapnik = new OpenLayers.Layer.OSM(); const fromProjection = new OpenLayers.Projection("EPSG:4326"); // ...

Enhancing React Performance: Storing Component Identity in Redux State

Can I safely pass this to a Redux action creator from a component defined using React.createClass? In my code, I have created the following reducer: const unsavedChangesProtectionReducer = handleActions({ [ENABLE_UNSAVED_CHANGES_PROTECTION]: (unsaved ...

The controller in my template is not being passed by the $routeProvider

I attempted to dynamically load a template in Angular using ngRoute... However, I encountered an issue with the following code: (app.js route configuration) app.config(function($routeProvider) { $routeProvider.when("/password", { templateUrl ...

Utilize AngularJS to bind keys to arrays

Hey there, I have an array that looks like this: $scope.Selectedgroups =[183,184,24] I want to convert it to the format shown below: [{groupId:183},{groupId:184},{groupId:24}]; I've been trying to convert it using a for loop: var groups=[] ...

Struggling to send information using Angular $resource?

I've been working on sending data to an API using Angular's $resource. Currently, I can successfully retrieve data from my test server using a GET request or querying. However, I'm having trouble figuring out how to send new data to the serv ...

How can you move away from using the url:port scheme with socket.io?

Recently, I've been delving into node.js and socket.io, but I'm struggling to eliminate the need to type "url:port" in the browser. Instead, I want users to simply enter the URL and have everything load up, similar to my work-in-progress single p ...

ng-bind-html is functional, yet it is raising a TypeError

Below is the code snippet containing the ng-bind-html: <span ng-bind-html="text"></span> Here is the stack trace: angular.js:13236 TypeError: bindings.push is not a function at Function.$$addBindingInfo (http://localhost:9000/bower_component ...

Exploring the depths of JSON using @attributes and @association in the realm of JavaScript and AngularJS

Currently, I am working on a project that involves utilizing an API for data retrieval, updates, and deletions. The API in question is the prestashop API. While I have managed to retrieve data and update certain items successfully, I encountered an issue. ...

Exploring the capabilities of utilizing filters within a ternary operator in AngularJS

Can a filter be applied to a variable in the template within a ternary operation? <img ng-src="{{ image_url && image_url|filter:"foo" || other_url }}"> In this scenario, the filter is custom-made and I prefer not to alter it to accommodate ...

Navigating Angular's Resolve Scope Challenges

As a junior developer, I've been diving into Angular.js and exploring the resolve feature of the route provider to preload my Project data from a service before the page loads. Previously, I was fetching the data directly inside the controller. Howeve ...