The continuous challenge of working with nested data in an Angular ng-repeat table

I've been facing difficulties in effectively presenting my data in a table using the ng-repeat feature of Angular. While this should be a straightforward task with ample examples available, I suspect that the problem lies in namespacing. In particular, where I have utilized self.all as the variable for my data in the JavaScript file.

HTML:

<div class="container">
  <div ng-controller="TransferController as transfers">

    <table st-table="transfers" class="table table-striped">
      <thead>
        <tr ng-repeat="row in transfers.all">
          <td>Period: {{ row.period }}</td>
          <td colspan="2">Upload Date: {{ row.uploadDate | date }}</td>
        </tr>
        <tr ng-repeat="code in transfers.all.sections">
          <td colspan="3">Transfer Code: {{ code.transferCode }}</td>
        </tr>
        <tr>
      </thead>
    </table>
  </div>
</div>

TransferController.js:

angular
  .module("RssTransfers")
  .controller("TransferController", ["$http", "$filter", function($http, $filter) {

    var self = this;
    self.all = [];

    function getTransfers() {
      $http
        .get("http://localhost:3000/transfers/api")
        .then(function(response) {
          self.all = response.data.transfers;
      })
    }

    console.log(self);
    getTransfers();
}]);

Sample data:

[{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
  "transferCode": 8675309,
  "details": [
    {
      "voucherNumber": [34, 22],
      "vendor": "jimmy",
      "description": "blah      ",
      "amount": "t        45,555.00"
    }
  ]
}]
},
{
"period": 4,
"uploadDate": "2015-11-19T21:00:00.000Z",
"section":[{
  "transferCode": 45576543,
  "details": [
    {
      "voucherNumber": 22,
      "vendor": "Jonson",
      "description": "trap music      ",
      "amount": "t        12,345.00"
    }
  ]
}]

}]

I attempted to create a Plunker demonstration but encountered challenges in getting Angular to function properly. Upon testing, period and uploadDate display correctly on the page, whereas the row corresponding to transferCode fails to render at all. Any assistance offered would be highly appreciated; it seems likely that I've made a simple error somewhere.

EDIT: Apologies for the oversight. The sample data posted initially was inaccurate as it did not include the section object. The corrected model has now been provided.

Answer №1

You are looping through the section of the all.transfers array, however the all.transfers array does not contain a section property. Instead, each element within the all.transfers array holds a section property.

To correctly iterate over the section property of each element, you need to nest the second ngRepeat inside the first one as shown below:

<tr ng-repeat="row in transfers.all">
    <td>Period: {{ row.period }}</td>
    <td colspan="2">Upload Date: {{ row.uploadDate | date }}</td>
    <td ng-repeat="code in row.sections">
        {{code.transferCode}}
    </td>
</tr>

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

Dynamic directive setting in angular-ui-grid using data from $scope

Apologies for my limited English proficiency... Please refrain from mocking... During compilation, I encounter difficulties using $scope. When I manually set a directive (such as 'ui-grid-selection'), everything functions perfectly as shown in t ...

What is the best way to swap the values of options between two input select elements?

I am trying to create a feature where I have two select dropdowns with the same options, and when a trigger is clicked, the option values are inverted between the two selects. Here is an example: <select id="source_currency"> <option value="BRL" ...

issue with selecting tabs in jquery

I need help with a problem that is connected to my previous article on CSS, button selection, and HTML tags. You can find the article here. I am not very proficient in JavaScript, so I would appreciate any insights or guidance on how to tackle this issue. ...

What are some techniques for managing scrolling within a particular element?

I am currently working with Vue.js and utilizing Element UI components. I want to incorporate a scroll management function to achieve infinite scrolling. To better understand, please refer to the screenshot in the Example section: Despite trying differen ...

What could be the reason for the malfunction of this AngularJS data binding feature?

I am trying to create an angularjs filter that outputs HTML, similar to what is discussed in the link, but I am encountering issues. In my HTML code, I have: <ul> <li ng-repeat="book in books | filter:query"> {{book.title}} ...

Attempting to retrieve the styling for the placeholder attribute of a specific element

I am currently working on a project for a company's website that utilizes placeholder attributes. My main goal is to extract the color styling from this SPECIFIC ATTRIBUTE only, rather than from the input element itself. The style is applied using - ...

Failure to acknowledge 'error' conflict in rethinkdbdash

Using rethinkdbdash for the first time, I tried to create a user while making sure that an error occurs if the user already exists. Despite following all the documentation, the code below keeps inserting without detecting any conflicts when run multiple ...

What is the best way to implement an instance method across all Models in sails.js?

My goal is to enhance all models by introducing a default toDisplay function. This function will leverage metadata, similar to how attribute and association definitions work, to modify the instance's attributes and associations in order to make them s ...

Navigating a list using AngularJS within an HTML view: tips and tricks!

Implementing AngularJS within the context of the Ionic framework. The $scope on the front-end consists of: an object User that contains a list of sports: $scope.user = { sports: { "running": true, "football": true } } a list named "matches" containing u ...

What is causing the $firebaseSimpleLogin:logout event to trigger multiple alert() calls?

Can someone help me figure out why an alert() is being executed three times in this code snippet: $scope.logout = function () { $rootScope.auth.$logout(); $rootScope.$on('$firebaseSimpleLogin:logout', function(event) { alert("Logg ...

Vue: Organize information by day first, then further categorize it by time

I am currently working on organizing a list of events by day and then further grouping them by time. I have successfully achieved the first level of categorization but I am facing challenges with implementing the second level. Ultimately, I aim to display ...

Is there a way to trigger an ajax call specifically on the textarea that has been expanded through jQuery?

Whenever I expand a textarea from three textareas, all three trigger an ajax call. Is there a way to only call the ajax for the specific expanded textarea? I tried using $(this).closest('textarea').attr('id'), but it didn't work. A ...

What is the best way to retrieve an object using callback data with jQuery?

Using jquery with a servlet to fetch data from a database. The callback function provides raw information from the database. How can I append these values to select options in jsp? Retrive_country servlet code: String sql1 = "SELECT * FROM state WHERE co ...

Is there a way to properly align text and input fields?

Here is my HTML code snippet: <div id = "right"> <br /><br /><br /> <br />Parameter 1 : 10 <input type="range" min="10" max="40" step="0.01" value="10" class="slider" id="myRange" onchange="updateValue_Parameter_1(this.va ...

Display <Go> in place of <Next> on the Chrome soft keyboard when using input type="number"

Why is the <Go> button displayed for all input types except for type="number"? Is there a way to ensure that this behavior is consistent across all input types without adding an extra button and ensuring that the soft keyboard only displays numbers ...

Arrangement of bootstrap and CSS library in header has an impact on the styling of h3 Tag

After rearranging the order of the online Bootstrap and offline CSS library, I noticed an impact on the h3 element in my HTML document. To further clarify this conflict, let me provide more details. <link rel="stylesheet" href="https://maxcdn.boot ...

Navigational options as a substitute for browserHistory within the context of react-router v4

Before, I successfully redirected users (e.g. after a successful login) using the browser history: import { useNavigate } from 'react-router-dom' useNavigate().replace('/home') In the updated react-router, importing browserHistory is ...

I aim to design a unique child window specifically for an "about" section within an electron js application on the Windows platform

I am looking to create a child browser window to showcase some key points about my application. According to the Electron JS documentation, it supports the "about" role for Mac OS but does not have built-in support for Windows. Therefore, I am in the pro ...

Preserve the video's aspect ratio while adjusting the browser size

I am currently developing a video editing tool and facing a challenge in maintaining the aspect ratio of `16:9` when resizing the screen both horizontally and vertically. While I have successfully achieved the expected behavior for horizontal resizing and ...

Is there a way to assign a role to a user without requiring them to send a message beforehand?

I've been searching for a solution to this issue, but all I could find were instructions on how to assign a server role to someone who has interacted in some way. Is there a way to locate a specific user on a server and assign a role to them without ...