Iterating through an array within another array using ng-repeat

Question

Iterating through an array within another array using ng-repeat

Hey there! I'm new to working with angular js and have been exploring the documentation on the official site. I attempted to implement a solution, but unfortunately, no data was displayed. Can someone point out what I may be doing incorrectly?

This is the array I am working with:

$scope.newArray = [{
    name: 'Robert',
    chemical: [{
        chem_status:"Active",
        chem_code:"0098A"
    }],
    place: 'London'
},
{
    name: 'Andy',
    chemical: [{
        chem_status:"Active",
        chem_code:"0098A"
    }],
    place: 'London'
}];

Below is a snippet of my html code:

<tr role="row" ng-repeat="chemical in newArray.chemical by $index">
    <td class="sorting_1">{{chemical.chem_status}}</td>

javascript angularjs arrays

Answer 1

Answer №1

angular.module("app", [])
  .controller("sampleController", function($scope) {

    $scope.newArray = [{
        name: 'Alice',
        chemical: [{
            chem_status: "Active",
            chem_code: "0101A"
          },
          {
            chem_status: "Inactive",
            chem_code: "010"
          }
        ],
        place: 'USA'
      },
      {
        name: 'Alice 2',
        chemical: [{
          chem_status: "Active",
          chem_code: "0101B"
        }],
        place: 'France'
      }
    ];

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">

  <div data-ng-controller="sampleController">

    <div data-ng-repeat="item in newArray track by $index">
      <div>Name: {{item.name}}</div>
      <div>Place: {{item.place}} </div>
      
       <div style="padding-left:20px" data-ng-repeat="chem in item.chemical track by $index">
        <div>Status: {{chem.chem_status}}</div>
        <div>Code: {{chem.chem_code}}</div>
        <hr/>
      <div>

    </div>

  </div>
</div>

Answer 2

angular.module("app", [])
  .controller("sampleController", function($scope) {

    $scope.newArray = [{
        name: 'Alice',
        chemical: [{
            chem_status: "Active",
            chem_code: "0101A"
          },
          {
            chem_status: "Inactive",
            chem_code: "010"
          }
        ],
        place: 'USA'
      },
      {
        name: 'Alice 2',
        chemical: [{
          chem_status: "Active",
          chem_code: "0101B"
        }],
        place: 'France'
      }
    ];

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">

  <div data-ng-controller="sampleController">

    <div data-ng-repeat="item in newArray track by $index">
      <div>Name: {{item.name}}</div>
      <div>Place: {{item.place}} </div>
      
       <div style="padding-left:20px" data-ng-repeat="chem in item.chemical track by $index">
        <div>Status: {{chem.chem_status}}</div>
        <div>Code: {{chem.chem_code}}</div>
        <hr/>
      <div>

    </div>

  </div>
</div>

Answer 3

Answer №2

Here's a suggestion for you

<div ng-repeat="elements in updatedArray.element by $index">
   <tr role="row" ng-repeat="element in elements by $index">
            <td class="sorting_1">{{element.status}}</td>

Answer 4

Here's a suggestion for you

<div ng-repeat="elements in updatedArray.element by $index">
   <tr role="row" ng-repeat="element in elements by $index">
            <td class="sorting_1">{{element.status}}</td>

Answer 5

Answer №3

Modify the initial chemical

<tr role="row" ng-repeat="newchemical in newArray.chemical by $index">
            <td class="sorting_1">{{newchemical.chem_status}}</td>

Answer 6

Modify the initial chemical

<tr role="row" ng-repeat="newchemical in newArray.chemical by $index">
            <td class="sorting_1">{{newchemical.chem_status}}</td>

Answer 7

Answer №4

When looking at the code above, it is important to note that $scope.newArray is actually an array itself. This means that we must first iterate over the outer array before iterating over the inner one.

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller("MyCtrl",function($scope) {
    $scope.name = [{
          "name": "Robert",
          "chemical": [{
          "chem_status":"Active",
          "chem_code":"0098A"
          }],
          "place": "London"
          }];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-App="myApp" ng-controller="MyCtrl">
  Hello,
  <table>
    <tr ng-repeat="chemicalName in name">
            <td class="sorting_1">
              <span ng-repeat="status in chemicalName.chemical">      {{status.chem_status}}
              </span>
            </td>
            </tr>
  </table>
</div>

This approach will yield optimal results.

Answer 8

When looking at the code above, it is important to note that $scope.newArray is actually an array itself. This means that we must first iterate over the outer array before iterating over the inner one.

var myApp = angular.module('myApp',[]);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

myApp.controller("MyCtrl",function($scope) {
    $scope.name = [{
          "name": "Robert",
          "chemical": [{
          "chem_status":"Active",
          "chem_code":"0098A"
          }],
          "place": "London"
          }];
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-App="myApp" ng-controller="MyCtrl">
  Hello,
  <table>
    <tr ng-repeat="chemicalName in name">
            <td class="sorting_1">
              <span ng-repeat="status in chemicalName.chemical">      {{status.chem_status}}
              </span>
            </td>
            </tr>
  </table>
</div>

This approach will yield optimal results.

Iterating through an array within another array using ng-repeat

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide to incorporating multiple rows from SQL into a PHP array

Challenge encountered while attempting to implement grid system in ionic framework

Vue Application experiences issues resizing Three.js Animation in Canvas

Customize the background color in VueJS based on user roles

handling component interaction with react-redux store

Inject the content into the DIV tag retrieved from the source

What is the best way to find my way to a particular category within angular?

Activate the submit button using jQuery

Enhancing link functionality with jQuery on a dynamically generated server page

Troubleshooting Problems with Wordpress Shortcode Arrays

switch out asterisk on innerhtml using javascript

Adjust the log level on winston in real-time

Using AJAX to retrieve version information via jQuery

"Facing an issue with Google Chrome not refreshing the latest options in an HTML select dropdown list

Encountering a connection error when trying to access a Google spreadsheet within a Next.js application

Utilizing Vue to Transform Unicode Characters into HTML Elements

Issues with closing Foundation 6 off-canvas feature

Alternative method for handling web requests in case JavaScript is not enabled

Utilize the input field value in an HTML dialog box to assign it to a variable in the code.gs file with the help

The requested file cannot be accessed using XMLHttpRequest.open url