Ng-repeat array in array

Question

I'm new to angular js, was looking through the docs in angular doc. I tried this way of doing, but no data was shown. Am I doing something wrong?

My array:

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

And here is my html code:-

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

Developer · Accepted Answer · 2017-03-16 06:09:20Z

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

    $scope.newArray = [{
        name: 'Robert',
        chemical: [{
            chem_status: "Active",
            chem_code: "0098A"
          },
          {
            chem_status: "SomeStatus",
            chem_code: "009"
          }
        ],
        place: 'India'
      },
      {
        name: 'Robert 2',
        chemical: [{
          chem_status: "InActive",
          chem_code: "0098B"
        }],
        place: 'Paris'
      }
    ];

  });

<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>

Dilip Belgumpi · Accepted Answer · 2017-03-16 06:07:58Z

0

Try like this

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

answered Mar 16, 2017 at 6:07

Dilip Belgumpi

6484 silver badges13 bronze badges

Comments

anis programmer · Accepted Answer · 2017-03-16 06:09:25Z

0

You can change the first chemical

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

answered Mar 16, 2017 at 6:09

anis programmer

9991 gold badge10 silver badges26 bronze badges

Comments

Vishal Srinivasan · Accepted Answer · 2017-03-16 06:22:08Z

In the above code the $scope.newArray itself is an array. So we need to first iterate the outer array and then iterate 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>

The above will give you the perfect result

Collectives™ on Stack Overflow

Ng-repeat array in array

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related