CODEWITHSUNDEEP
javascriptangularjs
Alexa
Alexa

Reputation: 77

Angularjs iterating in ng-repeat

My aim is to display the list of items along with their respective count and description.I'm getting item name and count into the table. Can anyone tell me how to get description into the table by mapping itemName?

var c = angular.module('myApp', []);
c.controller("myCtrl", function($scope) {
  $scope.data = {
    count: {
      "Item 1": 10,
      "Item 2": 20
    },
    items: [{
      "itemDescription": "Item Description",
      "itemName": "Item 1",
    }, {
      "itemDescription": "Item Description",
      "itemName": "Item 2",
    }]
  }

  $scope.name = "Demo"

})
<html>

<head>
  <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <h1>Hello Plunker!</h1>
  <table border="2">
    <tr>
      <td>Name</td>
      <td>Description</td>
      <td>Count</td>
    </tr>
    <tr ng-repeat="(key,value) in data.count">
      <td>{{key}}</td>
      <td></td>
      <td>{{value}}</td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

Views: 52

Answers (4)

VtoCorleone
VtoCorleone

Reputation: 17203

Use a method

.html

<td>
  {{getDescription(key)}}
</td>

.js

getDescription(key) {
  const foundItem = $scope.data.items.find(item => item.itemName === key);
  return foundItem ? foundItem.itemDescription : '';
}

Upvotes: 1

brk
brk

Reputation: 50291

Create a new array and put the values from count into it. Then ngRepeat that new array

var c = angular.module('myApp', []);
c.controller("myCtrl", function($scope) {
  $scope.data = {
    count: {
      "Item 1": 10,
      "Item 2": 20
    },
    items: [{
      "itemDescription": "Item Description",
      "itemName": "Item 1",
    }, {
      "itemDescription": "Item Description",
      "itemName": "Item 2",
    }]
  }

  var getCountsKeys = Object.values($scope.data.count);
  $scope.newArray = $scope.data.items.map(function(elem, index) {
    elem.itemVal = getCountsKeys[index]
    return elem;

  })

  $scope.name = "Demo"

})
<html>

<head>
  <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
  <h1>Hello Plunker!</h1>
  <table border="2">
    <tr>
      <td>Name</td>
      <td>Description</td>
      <td>Count</td>
    </tr>
    <tr ng-repeat="nw in newArray">
      <td>{{nw.itemName}}</td>
      <td>{{nw.itemDescription}}</td>
      <td>{{nw.itemVal}}</td>
    </tr>
  </table>
</body>

</html>

Upvotes: 1

Satish Kumar
Satish Kumar

Reputation: 601

You have to define a function which will return the description by iterating through the data-items.

var c = angular.module('myApp',[]);
c.controller("myCtrl",function($scope){
$scope.data={
    count: {
                "Item 1": 10,
                "Item 2" : 20,
                "Item 4": 30
            },
    items : [{
           "itemDescription": "Description 1",
            "itemName": "Item 1",
    },{
           "itemDescription": "Description 2",
            "itemName": "Item 2",
    },{
           "itemDescription": "Description 3",
            "itemName": "Item 3",
    }]
}
  
  $scope.name = "Demo";

$scope.getDescription = (item) => {
    const desc = $scope.data.items.find(i => i.itemName === item);
    return desc && desc.itemDescription // for exception handling
}
  
})
<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app= "myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <table border="2">
      <tr>
        <td>Name</td>
        <td>Description</td>
        <td>Count</td>
      </tr>
      <tr ng-repeat="(key,value) in data.count">
        <td>{{key}}</td>
        <td>{{getDescription(key)}}</td>
        <td>{{value}}</td>
      </tr>
    </table>
  </body>

</html>

Upvotes: 0

Jeremy Dentel
Jeremy Dentel

Reputation: 837

Is there a reason your data is structured as separate counts and items? If you retrieve them this way, it may be better to pre-process the data once retrieved to add the counts into their matchingdata.items array. If you don't want to pre-process the data, I would suggestion you ng-repeat on your items array as your counts object is easily queried.

<html>

  <head>
    <script data-require="[email protected]" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app= "myApp" ng-controller="myCtrl">
    <h1>Hello Plunker!</h1>
    <table border="2">
      <tr>
        <td>Name</td>
        <td>Description</td>
        <td>Count</td>
      </tr>
      <tr ng-repeat="item in data.items">
        <td>{{item.itemName}}</td>
        <td>{{item.itemDescription}}</td>
        <td>{{data.count[item.itemName]}}</td>
      </tr>
    </table>
  </body>

</html>

Upvotes: 3

Related Questions