Hello friends, in this article, we will learn how to find unique elements having properties with in an array (JSON). JSON means javascript object notation.
We can find unique elements with in array using indexOf method in javascript and inArray method of jQuery as follows.
var v = [23, 45, 6, 7, 8, 89, 9, 5, 3, 2, 1, 1, 2, 45, 6, 7, 5, 3, 4, 6];
var u = [];
v.forEach(ele=>{
if($.inArray(ele,u)==-1)
u.push(ele);
});
console.log(u);
OUTPUT: [23, 45, 6, 7, 8, 89, 9, 5, 3, 2, 1, 4]
But in case of JSON having array of elements with different properties.
var color=[{color:"black",category:"hue",type:"primary",code:{rgba:[255,255,255,1],hex:"#000"}},
{color:"white",category:"value",code:{rgba:[0,0,0,1],hex:"#FFF"}},
{color:"red",category:"hue",type:"primary",code:{rgba:[255,0,0,1],hex:"#FF0"}},
{color:"white",category:"value",code:{rgba:[0,0,0,1],hex:"#FFF"}},
{color:"black",category:"hue",type:"primary",code:{rgba:[255,255,255,1],hex:"#000"}},
{color:"black",category:"hue",type:"primary",code:{rgba:[255,255,255,1],hex:"#000"}},
{color:"blue",category:"hue",type:"primary",code:{rgba:[0,0,255,1],hex:"#00F"}},
{color:"yellow",category:"hue",type:"primary",code:{rgba:[255,255,0,1],hex:"#FF0"}},
{color:"green",category:"hue",type:"secondary",code:{rgba:[0,255,0,1],hex:"#0F0"}},
{color:"yellow",category:"hue",type:"primary",code:{rgba:[255,255,0,1],hex:"#FF0"}}];
var t = [];
color.forEach(function(e){
if($.inArray(t,e)==-1)
t.push(e);
})
console.log(JSON.stringify(t));
Same data will be returned.
OUTPUT: [{"color":"black","category":"hue","type":"primary","code":{"rgba":[255,255,255,1],"hex":"#000"}}, {"color":"white","category":"value","code":{"rgba":[0,0,0,1],"hex":"#FFF"}}, {"color":"red","category":"hue","type":"primary","code":{"rgba":[255,0,0,1],"hex":"#FF0"}}, {"color":"white","category":"value","code":{"rgba":[0,0,0,1],"hex":"#FFF"}}, {"color":"black","category":"hue","type":"primary","code":{"rgba":[255,255,255,1],"hex":"#000"}}, {"color":"black","category":"hue","type":"primary","code":{"rgba":[255,255,255,1],"hex":"#000"}}, {"color":"blue","category":"hue","type":"primary","code":{"rgba":[0,0,255,1],"hex":"#00F"}}, {"color":"yellow","category":"hue","type":"primary","code":{"rgba":[255,255,0,1],"hex":"#FF0"}}, {"color":"green","category":"hue","type":"secondary","code":{"rgba":[0,255,0,1],"hex":"#0F0"}}, {"color":"yellow","category":"hue","type":"primary","code":{"rgba":[255,255,0,1],"hex":"#FF0"}}]
To get rid of again duplicate elements we will first stringify each element with in loop and then find it using inArray method and move into new array if not find as shown in example below.
var color=[{color:"black",category:"hue",type:"primary",code:{rgba:[255,255,255,1],hex:"#000"}},
{color:"white",category:"value",code:{rgba:[0,0,0,1],hex:"#FFF"}},
{color:"red",category:"hue",type:"primary",code:{rgba:[255,0,0,1],hex:"#FF0"}},
{color:"white",category:"value",code:{rgba:[0,0,0,1],hex:"#FFF"}},
{color:"black",category:"hue",type:"primary",code:{rgba:[255,255,255,1],hex:"#000"}},
{color:"black",category:"hue",type:"primary",code:{rgba:[255,255,255,1],hex:"#000"}},
{color:"blue",category:"hue",type:"primary",code:{rgba:[0,0,255,1],hex:"#00F"}},
{color:"yellow",category:"hue",type:"primary",code:{rgba:[255,255,0,1],hex:"#FF0"}},
{color:"green",category:"hue",type:"secondary",code:{rgba:[0,255,0,1],hex:"#0F0"}},
{color:"yellow",category:"hue",type:"primary",code:{rgba:[255,255,0,1],hex:"#FF0"}}];
var dist = [];
var temp = [];
color.forEach(function(e){
if($.inArray(JSON.stringify(e),temp)==-1){
temp.push(JSON.stringify(e));
dist.push(e);
}
});
temp = [];
console.log(JSON.stringify(dist));
OUTPUT: [{"color":"black","category":"hue","type":"primary","code":{"rgba":[255,255,255,1],"hex":"#000"}}, {"color":"white","category":"value","code":{"rgba":[0,0,0,1],"hex":"#FFF"}}, {"color":"red","category":"hue","type":"primary","code":{"rgba":[255,0,0,1],"hex":"#FF0"}}, {"color":"blue","category":"hue","type":"primary","code":{"rgba":[0,0,255,1],"hex":"#00F"}}, {"color":"yellow","category":"hue","type":"primary","code":{"rgba":[255,255,0,1],"hex":"#FF0"}}, {"color":"green","category":"hue","type":"secondary","code":{"rgba":[0,255,0,1],"hex":"#0F0"}}]
If you have any query or question or topic on which, we might have to write an article for your interest or any kind of suggestion regarding this post, Just feel free to write us, by hit add comment button below or contact via Contact Us form.
Your feedback and suggestions will be highly appreciated. Also try to leave comments from your valid verified email account, so that we can respond you quickly.