Angularjs iterating in ng-repeat

Question

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>

count is an object, so $index isn't numeric.

Jeremy Dentel
– Jeremy Dentel

2018-05-22 17:07:29 +00:00
Commented May 22, 2018 at 17:07 — Jeremy Dentel
– Jeremy Dentel, Commented May 22, 2018 at 17:07
@JeremyDentel Ah, right. My mistake

mhodges
– mhodges

2018-05-22 17:07:55 +00:00
Commented May 22, 2018 at 17:07 — mhodges
– mhodges, Commented May 22, 2018 at 17:07

Jeremy Dentel · Accepted Answer · 2018-05-22 17:12:57Z

3

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>

answered May 22, 2018 at 17:12

Jeremy Dentel

8472 gold badges9 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mhodges Over a year ago

This is by far the best answer, imo

brk · Accepted Answer · 2018-05-22 17:25:14Z

1

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>

answered May 22, 2018 at 17:25

brk

50.3k10 gold badges59 silver badges85 bronze badges

1 Comment

Jeremy Dentel Over a year ago

Although I would suggest preprocessing the data in a way similar to this, this is prone to potential errors if your count data does not match order directly. If by chance there is an A Item that comes before Item 1 in the counts object, but the object in items that corresponds to A Item is not first, you now have the wrong counts attached to the values. Since you have the keys under itemName, you can query the count object directly $scope.data.count[elem.itemName] to guarantee the correct value.

VtoCorleone · Accepted Answer · 2018-05-22 18:51:14Z

1

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 : '';
}

edited May 22, 2018 at 18:51

answered May 22, 2018 at 17:07

VtoCorleone

17.2k5 gold badges40 silver badges52 bronze badges

1 Comment

mhodges Over a year ago

Should be return ...find(...).itemDescription; But that will error if find comes back null, so you'll have to do something like return ...(find(..) || {}).itemDescription;

Satish Kumar · Accepted Answer · 2018-05-22 17:14:03Z

0

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>

edited May 22, 2018 at 17:14

answered May 22, 2018 at 17:10

Satish Kumar

6016 silver badges14 bronze badges

1 Comment

mhodges Over a year ago

That will error if find comes back null, so you'll have to do something like return ...(find(..) || {}).itemDescription;

Collectives™ on Stack Overflow

Angularjs iterating in ng-repeat

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related