Compare two arrays in angular and loop over them

Question

I would like to combine two arrays on the same page to look up the right average rating for each cd, the cd list is in an ng-repeat and they can be matched both with the id_cd. How can i get the right average rating for each cd in the ng-repeat of the cd-listing?

I have the following codes in the landingpage.js

app.controller('LandingPageController',
   function LandingPageController($scope, $http) {

function GetAllCdRating() {
        $http({
            method: 'Get',
            url: "/LandingPage/GetAllCdRating"
        })
            .success(function (data) {
                $scope.AllCdRating= data;

         // the added section of Saurabh Agrawal
         $scope.getValue = function(cd){
             for (var i = 0; i < $scope.AllCdRating.length; i++) {
                 if ($scope.AllCdRating[i].id_cd == cd.id_cd) {
                 return $scope.AllCdRating[i].averageRating;
                 }
              }
          }
         })
}
GetAllCdRating();

// looks like this and holds about 200 records for now
[
 {
  "id": 1,
  "averageRating": 7,
  "id_cd": 13586
 },
 {
  "id": 2,
  "averageRating": 8,
  "id_cd": 13540
 },
 {
  "id": 3,
  "averageRating": 9,
  "id_cd": 13547
 },
 {
  "id": 4,
  "averageRating": 6,
  "id_cd": 13549
 }
]


   $scope.GetLastAddedCds = function () {
        $http({
            method: 'Get',
            url: "/LandingPage/GetLastAddedcds"
        })
            .success(function (data) {
                $scope.lastcds = data;
            })
    }
    $scope.GetLastAddedCds ();

// looks like this and holds about 5000+ records
[
 {
  "id_cd": 13586,
  "cdName": "the greatest hits",
 },
 {
  "id_cd": 13606,
  "cdName": "live or die",
 }
]
}

so far for the body section:

<div ng-controller="LandingPageController">
  <div class="srollcell" ng-repeat="cd in lastcds">
   <div>{{cd.title}}</div>
    <div>
       {{getValue(cd)}}
    </div>
  </div>
</div>

So i added your section Saurabh Agrawal (thanks) but somehow it seems it doesn't count up [i] it stays on '0'

Use the console.log on the $scope.AllCdRating.length gives me 27 (what is correct for this testing dataset) but the counter still stays on 0 and does not count up. — Ewald Bos
– Ewald Bos, Commented May 19, 2017 at 14:44

Saurabh Agrawal · Accepted Answer · 2017-05-19 12:19:28Z

Here is the working example of what you are looking for

Try this

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
	<script type="text/javascript">
		var myapp = angular.module('myapp', []);
		myapp.controller('FirstCtrl', function($scope) {
			$scope.myArray = [
			{
				"id": 1,
				"averageRating": 7,
				"id_cd": 13586
			},
			{
				"id": 2,
				"averageRating": 8,
				"id_cd": 13540
			},
			{
				"id": 3,
				"averageRating": 9,
				"id_cd": 13547
			},
			{
				"id": 4,
				"averageRating": 6,
				"id_cd": 13549
			}];

			$scope.myValues= [
			{
				"id_cd": 13586,
				"cdName": "the greatest hits",
			},
			{
				"id_cd": 13606,
				"cdName": "live or die",
			}];

			$scope.getValue = function(val){
				for (var i = 0; i < $scope.myArray.length; i++) {
					if ($scope.myArray[i].id_cd == val.id_cd) {
						return $scope.myArray[i].averageRating;
					}
				}
			}
		});
	</script>
</head>
<body>
	<div ng-app="myapp" ng-controller="FirstCtrl">
		<div ng-repeat="val in myValues track by $index">
			{{getValue(val)}}
		</div>
	</div>
</body>
</html>

Collectives™ on Stack Overflow

Compare two arrays in angular and loop over them

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related