I am unable to loop through the object Object

Question

I am unable to loop through the object Object

Looking at my JSON data structure, here's what it looks like:

{"id":1,"category":"cat","iconUrl":"www.test.com","subCategoryEntity":[{"id":3,"subCategory":"sub3","products":[]},{"id":2,"subCategory":"sub2","products":[]},{"id":1,"subCategory":"sub1","products":[{"id":1,"fileDownloadUri":"http://localhost:8081/api/v1/downloadFile/paint-bucket-orange-2-300x300.jpg","productName":"Name","productPrice":20.0,"productDesc":"this is the discreption","productStock":15,"productImages":[]}]}]}

https://i.sstatic.net/6CQab.png

My task is to loop through each subcategory and retrieve all the products within that subcategory.

Below is the Angular code I am using:

    <div *ngFor="let item of allProducts| keyvalue">
       {{item.key}}:{{item.value}}
   </div>

And here is the resulting output: https://i.sstatic.net/3R2Ps.png

angular typescript ngfor

Answer 1

Answer №1

If you want to loop through all products within each subcategory, you can use the following method:

<div *ngFor="let subCategory of allProducts.subCategoryEntity">
   <div *ngFor="let product of subCategory.products">
      {{product.id}}-{{product.productName}}
   </div>   
</div>

This approach may not be the most efficient way to achieve your goal.

I suggest iterating through both 'allProducts' and 'subCategories' to combine products into a variable and use a single 'ngFor' loop for better performance.

Answer 2

If you want to loop through all products within each subcategory, you can use the following method:

<div *ngFor="let subCategory of allProducts.subCategoryEntity">
   <div *ngFor="let product of subCategory.products">
      {{product.id}}-{{product.productName}}
   </div>   
</div>

This approach may not be the most efficient way to achieve your goal.

I suggest iterating through both 'allProducts' and 'subCategories' to combine products into a variable and use a single 'ngFor' loop for better performance.

I am unable to loop through the object Object

Answer №1

Similar questions

Tips for solving a deliberate circular dependency in an angular provider

Filtering a table based on a specified letter - the ultimate guide!

Listen for incoming data from the client in the form of an ArrayBuffer

How can I troubleshoot the issue with the Angular 6 @input() set() function not functioning properly?

Troubleshooting issues with TypeScript D3 v4 module import functionality

WebStorm highlights user-defined Jasmine matchers as mistakes and displays `TypeScript error TS2339: Property 'matcher' does not exist on type 'ArrayLikeMatchers '`

Visibility issue with Angular 4 ngFor variable within specific child component

Utilizing getServerSideProps and getInitialProps in Next.js to optimize page loading times

The directive is dynamically altering the disable attribute of its parent element

Using Typescript for-loop to extract information from a JSON array

Can you choose to declare a type in TypeScript, or is it required for every variable

Guide on converting any object with keys of type string to a generic type

When setting a value that has been explicitly casted, the original literal type remains intact for the new property or variable

What is the method for typing an array of objects retrieved from realmDB?

The system encountered difficulty handling a recursive structure

What is the best method for transferring chosen items to a different multiple select using Angular?

Angular2 is throwing a Typescript Reference error because 'is not defined' in the context

Receiving contextual information from Microsoft Teams within an Angular application integrated as a tab

Ways to bounce back from mistakes in Angular

Encountering 'no overload matches this call' while developing a useReducer using React with Typescript