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
– Partha Sarathi Ghosh

2016-02-15 10:53:58 +00:00
Commented Feb 15, 2016 at 10:53 — Partha Sarathi Ghosh
– Partha Sarathi Ghosh, Commented Feb 15, 2016 at 10:53
@ParthaSarathiGhosh Kindly assist me...

B.Balamanigandan
– B.Balamanigandan

2016-02-15 10:55:06 +00:00
Commented Feb 15, 2016 at 10:55 — B.Balamanigandan
– B.Balamanigandan, Commented Feb 15, 2016 at 10:55

Community · Accepted Answer · 2017-05-23 10:32:33Z

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, 2017 at 10:32

CommunityBot

11 silver badge

answered Feb 15, 2016 at 10:56

Partha Sarathi Ghosh

11.7k22 gold badges64 silver badges84 bronze badges

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

3 Comments

Partha Sarathi Ghosh Over a year ago

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.

B.Balamanigandan Over a year ago

It is possible, using of $scope.color instead of manual feeding JSON in the ColorService ???

Partha Sarathi Ghosh Over a year ago

YES then you need to pass the array as filter input. as follows~ <span>{{member.cInstId | color:collorArray}}</span>~.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related