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

From PHP to Javascript and back to PHP

The 'target' property is not found on the specified 'string' type

JavaScript checking the current page's URL is crucial for maintaining accurate and dynamic

Navigation bar theme toggle malfunctioning as anticipated

Injecting a service into an Angular constant is a straightforward process that involves

MDL Tab loading Problem

Creating metadata for a node/npm module build

Experience the click action that comes equipped with two unique functions: the ability to effortlessly add or remove a class

If there are multiple instances of the component, it may not function properly

Modify the elements of a matrix by analyzing their surrounding neighbors

Exploring the contrast between router.pathname and router.route within Next.js

Converting Geometry into BufferGeometry

Incorporate an HTTP Header into a Wicket Ajax Request

Adjust the FlipClock time based on the attribute value

Transforming a base64 encoded string into a byte array

Ways to identify when the scroll bar reaches the end of the modal dialog box

Utilizing the power of jQuery within three.js

Library of Angular components - utilizing images in templates

Dependency on the selection of items in the Bootstrap dropdown menu

Validating forms in ReactJS