Having difficulties with ng-repeat function in a table

This is the Angular code snippet I am currently working with:

$scope.receipts = {
    acquirer : [
        {
            id: 1,
            name: "test",
            balanceAmount: 4462.29,
            cardProducts: [
                {
                    cardProduct: {
                        balanceAmount: 2222,
                        id: 1,
                        name: "MASTERCARD CREDITO",
                        lancamentos: [
                            {
                                description: "vendas",
                                payedAmount: 1111
                            },
                            {
                                description: "cancelamentos",
                                payedAmount: 1111
                            }
                        ]
                    }
                }
            ]
        }
    ]
};

I'm attempting to use ng-repeat to create a table as shown below:

<tbody ng-repeat="i in receipts.acquirer[0].cardProducts[0].cardProduct">
   <tr>
      <th>
         <div class="cardFlag brand_1"></div>
         {{ i.name }}
      </th>
   </tr>
</tbody>

However, the output does not display the card name "MASTERCARD CRÉDITO". What could be the issue in my code? Is my usage of ng-repeat incorrect?

javascriptangularjs

Answer №1

When using ng-repeat, it iterates over the object's properties and assigns their values to i. Remember, i is not the entire object itself, so you would only access i directly, not i.name or i.balanceAmount.

An alternative approach is to modify the ng-repeat expression to (key,value) in. This will store the property name in key and the property value in value

ng-repeat="(key, value) in receipts.acquirer[0].cardProducts[0].cardProduct"

Demo 

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.receipts = {
      acquirer : [
          {
              id: 1,
              name: "test",
              balanceAmount: 4462.29,
              cardProducts: [
                  {
                      cardProduct: {
                          balanceAmount: 2222,
                          id: 1,
                          name: "MASTERCARD CREDITO",
                          lancamentos: [
                              {
                                  description: "vendas",
                                  payedAmount: 1111
                              },
                              {
                                  description: "cancelamentos",
                                  payedAmount: 1111
                              }
                          ]
                      }
                  }
              ]
          }
      ]
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ctrl">
  <tbody>
    <tr ng-repeat="(key, value) in receipts.acquirer[0].cardProducts[0].cardProduct">
      <th>
        <div class="cardFlag brand_1"></div>
        {{ key }}
      </th>
      <td>
        {{value}}
      </td>
    </tr>    
  </tbody>
</table>

If you intended to loop through each item in the cardProducts array, simply end the expression with .cardProducts

ng-repeat="i in receipts.acquirer[0].cardProducts"

Then you can access the object using i.cardProduct, such as i.cardProduct.name

Demo 

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.receipts = {
      acquirer : [
          {
              id: 1,
              name: "test",
              balanceAmount: 4462.29,
              cardProducts: [
                  {
                      cardProduct: {
                          balanceAmount: 2222,
                          id: 1,
                          name: "MASTERCARD CREDITO",
                          lancamentos: [
                              {
                                  description: "vendas",
                                  payedAmount: 1111
                              },
                              {
                                  description: "cancelamentos",
                                  payedAmount: 1111
                              }
                          ]
                      }
                  }
              ]
          }
      ]
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ctrl">
  <tbody>
    <tr ng-repeat="i in receipts.acquirer[0].cardProducts">
      <th>
        <div class="cardFlag brand_1"></div>
        {{ i.cardProduct.name }}
      </th>
    </tr>    
  </tbody>
</table>

Answer №2

For some reason unknown to me, I decided to switch my ng-repeat code to

<tbody ng-repeat="i in receipts.acquirer[0].cardProducts[0]">

and surprisingly, it worked perfectly fine. I wonder if there is a logical explanation for this strange outcome?

Answer №3

To get the desired output as 'test', you must update the ng-repeat to the following :

ng-repeat="i in receipts[0].acquirer"

The existing code is currently pointing to the 'cardProduct' object named MASTERCARD CREDITO.

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

Angular Resolution Verification

I'm currently working on making HTTP calls in Angular and I want to trigger a different service function if an error occurs. The problem is, no matter what the original service call function returns, the promise always ends up being "undefined". Here& ...

javascriptangularjspromise

Modifying HTML text with JavaScript according to the content of the currently selected div

Greetings! This is my first time posting a question, and I wanted to mention that I am relatively new to javascript/jquery. I have a gallery that displays image details on hover through text, while clicking on the image triggers a javascript function that ...

javascripthtmljquery

What is the best way to ensure that my theme button changer has an impact on all pages throughout my website, not only on the

Looking for some help here - I've got a button that changes the theme/colour of my website, but it only seems to work on the homepage and not on any other pages. Anyone know how I can fix this issue? Here's the JavaScript code: $(document).ready ...

javascripthtmlasp.net

Tips on how to choose all elements that do not include a specific value or group of values in cypress

Here's my situation: selector: ".list > div" const velue = [6, 9, 21] Each div contains a different value. I want to remove elements that contain a specific value, then select the first remaining element and click on it. It should look ...

javascriptcypress

Replace all occurrences of a specific string throughout a extensive document in Node.js

I'm facing a challenge with handling large files in memory. I need to go through each line, replace any double quotes found, and update the file itself. Currently, I am reading the file line by line, storing it in an array, and then overwriting the sa ...

javascriptnode.jsfs

What is the best way to transfer information between different pages in an HTML document?

I am facing a specific requirement where I must transfer form data from one HTML page to another HTML page. The process involves a total of 5 pages, with the user entering data in the following order: 1st page: Name 2nd page: Weight 3rd page: Height 4t ...

javascripthtml

Creating a jQuery-powered dynamic select field in Rails 3

After implementing the dynamic select functionality from this example on GitHub (GitHub Link), I successfully integrated dynamic selection for car models in my form for adding a new car. The form now filters car models based on the selected car name, and i ...

javascriptjqueryruby-on-rails

Developing with node and express: optimizing your workflow

After researching various blogs and tutorials on node + express development workflow, there is one crucial aspect that seems to be missing: When developing, which version of the app should you have open in your browser? The source app, featuring clean, ...

javascriptnode.jsexpressgulpdevelopment-environment

Using React's useEffect function with an empty dependency array to trigger a change in the

In the React application I'm currently working on, the useEffect function is triggered whenever the prop value changes from an empty array to another empty array. I am fetching query parameters from the page and passing them down to a component that ...

javascriptarraysreactjsreact-routernext.js

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 ...

javascriptangularjs

JavaScript button mouse enter

There seems to be an issue with this code. The button is not functioning properly after hovering over it, even though it was copied from the instructional website where it works fine. <html> <head> <title>Button Magic</t ...

javascripthtmlcss

Is JavaScript necessary for this task in PHP?

Hi everyone, I recently discovered a way to style a PHP echo in a more visually appealing manner. Instead of presenting an unattractive colored box right away, I was wondering if there is a way to only display the box when the user selects the calculation ...

javascriptphpjqueryhtmlcss

Exploring the benefits of WordPress integration with form caching and dynamic show/hide div

Within my Wordpress (3.8.1) website, I have created a form that includes a checkbox. When this checkbox is clicked, a hidden div appears on the screen, prompting users to provide additional information. The JavaScript code responsible for showing the hidd ...

javascriptwordpress

It appears that the Next.js environment variables are not defined

Upon setting up a fresh next.js project using npx create-next-app@latest and configuring some environment variables in the .env.local file, I encountered an error when attempting to run the server. "Failed to load env from .env.local TypeError: Cannot ...

javascriptreactjsnext.jsenvironment-variables

Using the index of a v-for loop as the value for v-model

I am facing a challenge in setting the index of a v-for loop to a dynamic v-model. I have tried a method that works, but it is not elegant and results in errors in the console: Here is my template section: <div v-for="(ob, index) in $v.especifications ...

javascriptvue.jsvue-cliv-forv-model

Re-establishing the socket channel connection in a React application after a disconnection

There are several solutions to this issue, but none of them seem to be effective for me. The existing solutions are either outdated or do not meet my needs. I am facing a problem where I have a large amount of data being transferred from the server to the ...

javascriptreactjssocket.ionext.jsfastify

Issues with uploading files in NodeJs using express-fileupload are causing errors

I created a REST API in NodeJs for File Upload which is functioning correctly, however I am facing an issue. When I upload more than 2 images, only 2 or 3 get uploaded and sometimes one gets corrupted. I suspect that the loop is running too fast causing th ...

javascriptnode.jsrestexpressfor-loop

Node functions continue to run smoothly without affecting the loop

I am working on a webdriverjs application and I am trying to determine when jQuery has finished its processes on the page. I have implemented some methods, but it seems that even when the condition is supposed to trigger an else statement and stop the loop ...

javascriptnode.js

Click event handling in JavaScript - Manipulating HTML tables

Currently, I am delving into the world of JavaScript and have been focused on experimenting with Mouse events to gain a deeper understanding of their functionality. <html> <head> <title>Mouse Events Example</title> <scri ...

javascripthtmleventsonclick

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script

I've encountered an issue with a form that includes: <input type="password" id="password" /> I want to display some readable text temporarily, so I used the following code: $('#password').prop('type', 'text'); ...

javascriptjquerygoogle-chromeinternet-explorerpasswords