loop through nested arrays

Question

loop through nested arrays

My goal is to use ng repeat in Angular to iterate through a child array of a multidimensional array. The json object I am working with is as follows:

 $scope.items =   [{    "id":1,
        "BasisA":"1",
        "Basis":true,
        "personSex":"m",
        "isCollapsed":false,
        "name":"Mark Polos",
        "age":"1955",
        "results":[{"1000":{"company_name":"***","model":"***","modelname":"***","pr":222,"rating":4.5,"priority":9,"matching":1},
                    "1001":{"company_name":"***","model":"***","modelname":"***","pr":228.7,"rating":5.7,"priority":7,"matching":2},
                    "1002":{"company_name":"***","model":"***","modelname":"***","pr":241.7,"rating":1.9,"priority":4,"matching":3}
                }]
    }]

I attempted the following approach:

... data-ng-repeat="item in items">

And then for each item in the table:

<tr data-ng-repeat="i in item | orderBy:'insItem.pr'">

javascript arrays angularjs

Answer 1

Answer №1

It appears that the results property is not structured as a typical "array." If this is simply a mistake in your example, then please disregard this message. However, if it is intentional... read on.

The structure seems to be an array with a single item, where that item contains properties which are objects themselves. To access the property "pr" for the result named "1000," you would use code like item.results[0]["1000"].pr instead of the code expected by ng-repeat (item.results[0].pr).

Is there a way to convert your items so that results becomes a proper array?

Alternatively, could you create a function within your controller to return the desired array?

View Code:

<... data-ng-repeat="result in resultsFromItem(item)" >

Controller Code:

$scope.resultsFromItem = function (item) {

   if(item==undefined || item.results==undefined || item.results.length==0) {
      return [];
   }

   var myResults = [];
   for (var key in item.results[0]) {
      if(item.results[0].hasOwnProperty(key)) {
         myResults.push(item.results[0][key]);
      }
   }

   return myResults;

}

You may even consider attaching the transformed results object to each item object (to only perform the transformation once) if needed.

Answer 2

It appears that the results property is not structured as a typical "array." If this is simply a mistake in your example, then please disregard this message. However, if it is intentional... read on.

The structure seems to be an array with a single item, where that item contains properties which are objects themselves. To access the property "pr" for the result named "1000," you would use code like item.results[0]["1000"].pr instead of the code expected by ng-repeat (item.results[0].pr).

Is there a way to convert your items so that results becomes a proper array?

Alternatively, could you create a function within your controller to return the desired array?

View Code:

<... data-ng-repeat="result in resultsFromItem(item)" >

Controller Code:

$scope.resultsFromItem = function (item) {

   if(item==undefined || item.results==undefined || item.results.length==0) {
      return [];
   }

   var myResults = [];
   for (var key in item.results[0]) {
      if(item.results[0].hasOwnProperty(key)) {
         myResults.push(item.results[0][key]);
      }
   }

   return myResults;

}

You may even consider attaching the transformed results object to each item object (to only perform the transformation once) if needed.

Answer 3

Answer №2

To retrieve the desired information, make sure to interact with the results section:

... data-ng-repeat="element in elements">

<tr data-ng-repeat="subElement in element.results">

This is necessary because the nested array containing the data is located within the results attribute of the primary object.

Answer 4

To retrieve the desired information, make sure to interact with the results section:

... data-ng-repeat="element in elements">

<tr data-ng-repeat="subElement in element.results">

This is necessary because the nested array containing the data is located within the results attribute of the primary object.

Answer 5

Answer №3

I implemented a solution using three nested ng-repeat directives to achieve the desired outcome :-) In the third ng-repeat, I utilized the functionality of

ng-repeat="(key, value) in result"

to display all keys and values of the result object. This was made possible with the assistance of an answer found on how to iterate over keys and values in ng-repeat. Although the orderBy: section is not functioning as intended at the moment (any insights on how to implement this would be greatly appreciated).

    <ul>
      <li ng-repeat="item in items">
         id: {{item.id}}, name: {{item.name}}, age: {{item.age}}, results: 
         <table>
           <tr ng-repeat="result in item.results">
             <td>
               <table style="border: 1px solid black;">
                  <tr ng-repeat="(key, value) in result | orderBy: value.pr">
                    <td> {{key}} </td> <td> {{ value }} </td>
                  </tr>
              </table>
            </td>
          </table>
      </li>
    </ul>

Plunker

Answer 6

I implemented a solution using three nested ng-repeat directives to achieve the desired outcome :-) In the third ng-repeat, I utilized the functionality of

ng-repeat="(key, value) in result"

to display all keys and values of the result object. This was made possible with the assistance of an answer found on how to iterate over keys and values in ng-repeat. Although the orderBy: section is not functioning as intended at the moment (any insights on how to implement this would be greatly appreciated).

    <ul>
      <li ng-repeat="item in items">
         id: {{item.id}}, name: {{item.name}}, age: {{item.age}}, results: 
         <table>
           <tr ng-repeat="result in item.results">
             <td>
               <table style="border: 1px solid black;">
                  <tr ng-repeat="(key, value) in result | orderBy: value.pr">
                    <td> {{key}} </td> <td> {{ value }} </td>
                  </tr>
              </table>
            </td>
          </table>
      </li>
    </ul>

Plunker

loop through nested arrays

Answer №1

Answer №2

Answer №3

Similar questions

A guide to removing functions from the render method

Combine the entities within the object

Optimizing Midnight UTC+0 Setting in JavaScript Date Functions

When working with data in Angular, make sure to use any[] instead of any in app.component.html and app.component.ts to avoid causing overload errors

Button to close Jquery Dialog

Organizing a NodeJS module - properties and functions

Ways to decrease the size of this item while maintaining its child components?

What impact does nesting components have on performance and rendering capabilities?

Using PHP to send post requests with Ajax for DataTables functionality

Using an external JavaScript script may encounter difficulties when loading pages with jQuery

Change ES6 JavaScript to ES5 standard

What are Fabric.js tools for "Drop Zones"?

Automatically collapse the Shadcn-UI Accordion when the mouse exits

The debate between client-side and server-side video encoding

Automatically tapping the Quora "expand" button through code

Getting js.map Files to Function Properly with UMD Modules

What are some effective ways to analyze jQuery and JavaScript using web development tools?

Is there a way to efficiently retrieve multiple values from an array and update data in a specific column using matching IDs?

Struggling to concentrate using jQuery?

Ways to verify AJAX Response String when data format is specified as JSON