CODEWITHSUNDEEP
angularjs
rahul
rahul

Reputation: 47

Displaying contents of an Array that contains another Array

I am trying to display the contents of an array that contains another array via angularJs. The code below does not work. I am not sure what i am doing wrong here. Please let me know.

Link : https://plnkr.co/edit/Bp8MJXczii0HVjujZ6Xe?p=preview

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
    <script>
      var app = angular.module('plunker', []);
      app.controller('MainCtrl', function($scope) {
        $scope.items = [
          [{"a":"1", "b":"2", "c":"3"}],
          [{"a":"4", "b":"5", "c":"6"}],
          [{"a":"7", "b":"8", "c":"9"}]
        ]
      });
    </script>
  </head>
  <body ng-controller="MainCtrl">
    <div ng-repeat="item in items">
      <ul>
        <li ng-repeat="i in item.items">
          {{i.a}},{{i.b}},{{i.c}}
          </li>
      </ul>
    </div>
  </body>
</html>

Upvotes: 0

Views: 32

Answers (2)

rahul
rahul

Reputation: 47

The correct code will be 

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
    <script>
      var app = angular.module('plunker', []);
      app.controller('MainCtrl', function($scope) {
        $scope.items = [
          [{"a":"1", "b":"2", "c":"3"}],
          [{"a":"4", "b":"5", "c":"6"}],
          [{"a":"7", "b":"8", "c":"9"}]
        ]
      });
    </script>
  </head>
  <body ng-controller="MainCtrl">
    <div ng-repeat="item in items">
      <ul>
        <li ng-repeat="i in item">
          {{i.a}},{{i.b}},{{i.c}}
          </li>
      </ul>
    </div>
  </body>
</html>

This works for me

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

Your data structure is invalid. You are using [] for objects not {}

Change to 

    $scope.items = [
      {"a":"1", "b":"2", "c":"3"},
      {"a":"4", "b":"5", "c":"6"},
      {"a":"7", "b":"8", "c":"9"}
    ]

now you have one array to repeat over

Upvotes: 1

Related Questions