Get Distinct/Unique value from JSON | Unique value from JSON in angular

In several moment we need distinct object from a array of object in a JSON. Here we will see different way to get unique and distinct value from JSON.

var myjson = {
    "DATA": [
        {
            "id": 11,
            "name": "ajax",
            "subject": "OR",
            "mark": 63
        },
        {
            "id": 12,
            "name": "javascript",
            "subject": "OR",
            "mark": 63
        },
        {
            "id": 13,
            "name": "jquery",
            "subject": "OR",
            "mark": 63
        },
        {
            "id": 14,
            "name": "ajax",
            "subject": "OR",
            "mark": 63
        }
    ]
}

Get unique values of any key from array of object

Here we will use map function of array and set function to get unique value of array of object. Here we want to get unique value for key “name”

  • Get all value in a array of a given key
// Get all value in a array of a given key
valueArray = myjson.DATA.map({name} => name)
// output = ['ajax','javascript','jquery','ajax']
  • Now we will use set() to remove duplicate value from above output array
// Now we will use set to remove duplicate value from array
setOfValue = new Set(valueArray)
  • Now we will convert set to array using spread operator
// Now we will convert set to array using spread operator
uniqueValues = [...setOfValue]
console.log(uniqueValues)
// ['ajax','javascript','jquery']

Get filter object on the basis of any key of object

In above method we got the unique value for “name” key from array of object for a particular key. But now we will get complete object with unique value for a given key.

  • Store each of the elements in an object keyed of the name field. If there is a collision (the name already exists) then it is just replaced with the most recent one.
temp = {}
for (var i = 0; i < varjson.DATA.length; i++) {
    temp[varjson.DATA[i].name] = varjson.DATA[i];
}
console.log(temp)
// {"ajax":{"id":20,"name":"ajax","subject":"OR","mark":63},"javascript":{"id":12,"name":"javascript","subject":"OR","mark":63},"jquery":{"id":15,"name":"jquery","subject":"OR","mark":63}}
  • Now we will reset the array in our varjson object (which we declare above)
// Reset the array in varjson (original object)
varjson.DATA = [];
// Push each of the values back into the array.
for (var o in temp) {
    varjson.DATA.push(temp[o]);
}
console.log(varjson)
// {"DATA":[{"id":20,"name":"ajax","subject":"OR","mark":63},{"id":12,"name":"javascript","subject":"OR","mark":63},{"id":15,"name":"jquery","subject":"OR","mark":63}]}

Complete Code

// Get all value in a array of a given key
valueArray = myjson.DATA.map({name} => name)

// Now we will use set to remove duplicate value from array
setOfValue = new Set(valueArray)

// Now we will convert set to array using spread operator
uniqueValues = [...setOfValue]
console.log(uniqueValues)

temp = {}
for (var i = 0; i < varjson.DATA.length; i++) {
    temp[varjson.DATA[i].name] = varjson.DATA[i];
}
console.log(temp)

// Reset the array in varjson (original object)
varjson.DATA = [];
// Push each of the values back into the array.
for (var o in temp) {
    varjson.DATA.push(temp[o]);
}
console.log(varjson)

Reference: StackOverFlow

Leave a Reply