Loop through a nested array of objects within the same row using ng-repeat

Struggling with binding data from a nested array in the same row.

Here is my Array of Objects:

$scope.Record = [
{ Name:'Adam', 
Months:[
 {Month: 'Jan', Value: 10, cust:2},
 {Month: 'Feb', Value: 30, cust:2}
 {Month: 'March', Value: 30, cust:2}
 {Month: 'April', Value: 50 , cust:2}
 {Month: 'June', Value: 15 , cust:2}
 ] },

  { Name:'John', 
Months:[
 {Month: 'Jan', Value: 10 , cust:3},
 {Month: 'Feb', Value: 30,, cust:6}
 {Month: 'March', Value: 30,, cust:8}
 {Month: 'April', Value: 50,, cust:13}
 {Month: 'June', Value: 15,, cust:20}
 ] }
]

This is how it looks in my View:

     <tr>
         <th colspan="1">Customer</th>
         <th colspan="2">January</th>
         <th colspan="2">February</th>
         <th colspan="2">March</th>
          <th colspan="2">April</th>
          <th colspan="2">May</th>
          <th colspan="2">June</th>
    </tr>
     <tr>
       <th>Name</th>
       <th>Value</th>
       <th>Cust</th>
     </tr>
    <tbody>
    <tr ng-repeat="rc in Record">
      <td ng-bind="rc.Name\"></td>
      <td ng-bind="rc.Months[0].Value\"></td>
      <td ng-bind="rc.Months[0].cust\"></td>
     </tr>
    </tbody>

Any advice on how to bind all the Months array of Objects in the same row would be greatly appreciated. I've tried everything without success.

Thank you!

Answer №1

Check out the updated code with a working example included: https://jsfiddle.net/galeroy/z97u230v/25/

Discover the secret to incorporating nested repeats in AngularJS

<tbody ng-repeat="rc in records">
    <tr>
        <td>{{rc.name}}</td>
        <td colspan="2" ng-repeat="item in rc.months">
            <span ng-if="item.value">val: </span> {{item.value}}
            <span ng-if="item.value && item.cust">, </span>
            <span ng-if="item.cust">cust:</span> {{item.cust}}        
         </td>
      </tr>
 </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

Avoid the need to refresh the HTML content every time there is a change in the Angular $

One of the challenges I'm facing is with a for loop in my JavaScript: for (var i=0;i<2;i++) { $scope.widget = widgets[i]; $scope.header = widgets[i].data.header; $scope.items = widgets[i].data.items; $scope.footer = widgets[i].data ...

validating price ranges with the use of javascript or jquery

<!DOCTYPE html> <html lang="en"> <head> <title>My Page Title</title> </head> <body> <form method="post" action="process-form.php"> Price Range: From <input type="text" id="price-from"> ...

What is the best way to show only a specific v-for element in Vue.js?

Is there a way to select a specific item from a v-for loop in vue js? I am using v-for to retrieve Youtube data API items. Each item contains an iframe that should only be displayed when a user clicks on a play button. Currently, all the iframes are shown ...

Verify all inputs are complete in the FullScreenForm

I have been working on implementing a form from this website: http://tympanus.net/Development/FullscreenForm/ My main objective is to validate each input when the form is submitted and display any errors that may arise. To achieve this, I have already se ...

Using Node.js to import modules without the need for assignment

In my recent project, I decided to organize my express application by putting all of my routes in a separate file named routes.js: module.exports = function(server) { // Server represents the Express object server.get('/something', (req, res) ...

Angular 7: Resetting multiple dynamically generated checkboxes back to their original state with the click of a button

I have created a child component that contains 3 checkboxes, generated dynamically using ngFor, along with Apply and Cancel buttons. In the parent template, I include the selector tag for the child component. The parent component accesses this child compo ...

What is the most effective way to create a live preview using AngularJS and CSS?

Is there a way to dynamically change the background color of the body based on the hexadecimal value entered in a textfield, without using jQuery? I want the change to happen live as the user types. The current code works but it doesn't feel right. I ...

Custom pagination page size in AngularJS trNgGrid

I have been working on developing an Angular table using trNgGrid. It's functioning fine, but I am looking to incorporate custom pagination where the user can choose the number of page items to display per page. I checked out the TrNgGrid Global Opti ...

When importing a component that is passed as a prop in React, it is causing a blank page to render and is displaying an error in the

Visit this link for the code Everything was running smoothly with the app until I decided to include the Icon component in SidebarOption.js. Now, upon doing so, a blank page appears and an error is displayed in the console: An error occurred stating that ...

Create a new tab with a specified URL when a link is clicked

When the 'Terms and Conditions' link is clicked, I want to open a new tab in the same browser with the URL: http://localH:30321/OrchardLocal/TermsAndConditions Here is what I have tried so far: <p>Accept the <a href="~/" target="_blank ...

Looking for a method to substitute "test" with a different value

Showing a section of the menu using <li id="userInfo" role="presentation" data-toggle="tab" class="dropdown"> <a href="#" name="usernameMenu" class="dropdown-toggle" data-toggle="dropdown" role="button"> <span class="glyphicon glyph ...

Tips for enabling the background div to scroll while the modal is being displayed

When the shadow view modal pops up, I still want my background div to remain scrollable. Is there a way to achieve this? .main-wrapper { display: flex; flex-direction: column; flex-wrap: nowrap; width: 100%; height: 100%; overflow-x: hidden; ...

Display only a loading image with a see-through background after submitting the page

After submitting the page, I would like to display a loading image in the middle of the page with a transparent background. The current styling code I have used is as follows: #loading { position: fixed; top: 50%; left: 50%; z-index: 1104; ...

Retrieve a list of orders from Woocommerce's REST API specifically for the current date

Utilizing the WooCommerce REST API, I am developing a Vue dashboard where I am aiming to display today's orders and this month's orders as a feature. I am aware that WooCommerce provides date filters such as after and before. However, I need to ...

Encountering a 500 error when making API requests after deploying Next.js on Vercel, although they work fine

I recently deployed my Next.js app to Vercel, and I'm experiencing issues with my API calls returning a 500 status code, even though they work perfectly fine on localhost. The initial load using getStaticProps seems to be working, so I suspect the con ...

showing console logs before initializing preferences may lead to inaccurate results

My Content Management System (CMS) is WordPress. Recently, after making some changes, I encountered an error on a specific page: An error occurred: loading pref showConsoleLogs before prefs were initialised, leading to incorrect results being displayed - ...

Enable the ability to click on a row within the angular chart

I recently acquired the demo from However, I am wondering how I can set up a clickable row to direct users to another webpage. Any guidance on this would be greatly appreciated. ...

Execute an asynchronous function in Javascript, then output the returned data to the console

Is there a way to effectively handle the data returned from an async function? example: JS FILE: async function getData(){ try { $.getJSON('./data.json', (data) => { return data; }); } catch(error ...

JS Month Interval Bug Causing Issues with Chart Date

This script retrieves and summarizes download data from MySQL by day, displaying it as a chart. However, there's an issue with the way dates are handled between PHP and JavaScript (Highcharts). While PHP outputs month values from 1 to 12, JavaScript c ...

Interfacing with Ajax to dispatch information to a PHP script

Hello, I'm currently working on implementing Ajax in my web application. However, I've encountered a small issue. I'm attempting to check if a username has already been registered by controlling a form. The problem arises when my JavaScript ...