How to get distinct values from JSON based on Foriegn Key using angularJS

Question

I'm having two JSON Array, $scope.data has the primary details, which I want to show in the UI, in that cInstId is the foreign key from the JSON $scope.color.

The two JSON Arrays are

$scope.data = [
    {
        "id": 1,
        "cTitle": "One",
        "cInstId": 1
    },
    {
        "id": 2,
        "cTitle": "Two",
        "cInstId": 2
    },
    {
        "id": 3,
        "cTitle": "Three",
        "cInstId": 3
    },
    {
        "id": 4,
        "cTitle": "Four",
        "cInstId": 4
    },
    {
        "id": 5,
        "cTitle": "Five",
        "cInstId": 4
    }
];

$scope.color = [
    {
        "cInstId": 1,
        "cInstTitle": "Blue"
    },
    {
        "cInstId": 2,
        "cInstTitle": "Green"
    },
    {
        "cInstId": 3,
        "cInstTitle": "Red"
    },
    {
        "cInstId": 4,
        "cInstTitle": "Orange"
    },
    {
        "cInstId": 5,
        "cInstTitle": "Violet"
    }
];

My expected output should be as like the picture

<div ng-repeat="members in data">
    <!-- How to Show it in the UI -->
</div>

Note: Don't create any temp array and for-each implementation in the Controller.

Did you tried anything? Show us the code. – Partha Sarathi Ghosh Feb 15 '16 at 10:53 — Partha Sarathi Ghosh, Feb 15 '16 at 10:53
@ParthaSarathiGhosh Kindly assist me... – B.Balamanigandan Feb 15 '16 at 10:55 — B.Balamanigandan, Feb 15 '16 at 10:55

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

You can use custom filter here for this.

angular.module('ModuleName').filter('color', function($filter) {
  return function(id, colorArray) {
    return $filter('filter')(colorArray,{'cInstId': id})[0].cInstTitle;
  };
});

Use this filter as follows:

<div ng-repeat="members in data">
    <!-- How to Show it in the UI -->
    <span>{{member.cInstId | color:color}}</span><!--Second color is your scope var -->
</div>

Note: I have used this and this

But it will be better if you can create your color service and use that service instated of using the array directly.

edited May 23 '17 at 10:32

Community

1
1

answered Feb 15 '16 at 10:56

Partha Sarathi Ghosh

10,936
20
59
84

Look at my custom filter here it is caling angular filter and passing your colors array. It is also passing your provided id to find the exact color here. – Partha Sarathi Ghosh Feb 15 '16 at 11:09
It is possible, using of $scope.color instead of manual feeding JSON in the ColorService ??? – B.Balamanigandan Feb 15 '16 at 11:11
YES then you need to pass the array as filter input. as follows~ {{member.cInstId | color:collorArray}}~. – Partha Sarathi Ghosh Feb 15 '16 at 11:16

How to get distinct values from JSON based on Foriegn Key using angularJS

1 Answers1