Loop through an array of objects that each contain two sub-objects using ng

Question

Loop through an array of objects that each contain two sub-objects using ng

I'm looking to organize each data-record in an object that contains two other objects structured like this:

data

    Object { abbData={...}, invoiceData={...}}

abbData

    Object { service="24", conn_fee="0", month_fee="249", more...}

invoiceData

    Object { invoice_fee="0", invoice_type="1", invoice_mail="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be0e3eae5ecbdbff8fdcbe3e4ffe6eae2e7a5e8e4e6">[email protected]</a>", more...}

Within the 'data' object, there are two sub-objects - abbData and invoiceData. How can I retrieve and display the records of abbData and invoiceData using ng-repeat?

javascript angularjs object

Answer 1

Answer №1

To make use of this functionality, simply employ the following code:

ng-repeat="(prop, obj) in data"

where:

prop holds the property name. For example: appData, invoiceData

and:

obj stores the actual object.

html:

<pre ng-repeat="(prop, obj) in data">
  <strong>{{ prop }}</strong>: {{ obj | json }}
</pre>

Check out the demo here: http://jsbin.com/ximohage/1/

Answer 2

To make use of this functionality, simply employ the following code:

ng-repeat="(prop, obj) in data"

where:

prop holds the property name. For example: appData, invoiceData

and:

obj stores the actual object.

html:

<pre ng-repeat="(prop, obj) in data">
  <strong>{{ prop }}</strong>: {{ obj | json }}
</pre>

Check out the demo here: http://jsbin.com/ximohage/1/

Answer 3

Answer №2

let newItem = {};
newItem.abbInfo={...};
newItem.invoiceDetails={...};

Answer 4

let newItem = {};
newItem.abbInfo={...};
newItem.invoiceDetails={...};

Loop through an array of objects that each contain two sub-objects using ng

Answer №1

Answer №2

Similar questions

Module for managing optional arguments in Node.js applications

Utilizing Laravel 5.3 and Vue.js for Dynamic AJAX Calls Based on Select Box Selections

Enable divs to be interactively chosen

Leveraging random attributes in Next.js without encountering the "server/client mismatch" issue

When json.parse encounters an undefined value at position 1

Is there a way to execute Typescript tests using JasmineKarma within a TFS Build Process?

Understanding the scope of jQuery variables within a function

Using a for loop in Flot to display data from a JSON file

Guide to emitting a value using the composition API

Retrieve the toggle input value to change the page view using jQuery

Incorporate v-if to target a particular item within a v-for loop

Experience seamless transitions with Material UI when toggling a single button click

Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

Adding days to a HijriDate: A step-by-step guide

Centering an image that is absolutely positioned within a container that is relatively positioned, horizontally

RxJS BehaviorSubject allows you to retrieve the current value or obtain a new one depending on a specific condition

Continuous Load More: Loads content infinitely until a page is fully loaded

Fill in the missing keys, values, and data within the JSON object

Changing the value of a variable after iterating through an array in JavaScript

Creating a React Native project without the use of TypeScript