Hello friends, In this article, we will use find method of javascript for finding first element in JSON by object property value.
The javascript find() method is used to find the first element from the array that satisfies the condition implemented by a callback function.
If more than one element satisfies the condition then the first element satisfying the condition is returned.
Syntax:
var resultArray = givenArray.find(callback(element, index, array),thisArg)
callback:
Function is a predicate, to test each element of the array. Return true to keep the element otherwise false. It accepts three arguments.
element: The Current element on which is being processed in the array.
index: It is Optional argument, The index of the current element which is being processed in the array.
array: It is Optional argument, On which callback was invoked by filter.
thisArg: It is Optional argument, Value to use as this when executing callback.
Return: A new array with the elements that pass the test. If no elements pass the test, an 'undefined' will be returned.
var v = [23,45,6,7,8,89,9,5,3,2,1,1,2,45,6,7,5,3,4,6];
var f = function(e)
{
return e>10;
}
var r = v.find(f)
document.write(r);
-- OR
var v = [23,45,6,7,8,89,9,5,3,2,1,1,2,45,6,7,5,3,4,6];
var r = v.find(e=>e>10)
document.write(r);
OUTPUT: 23
var v = [23,45,6,7,8,89,9,5,3,2,1,1,2,45,6,7,5,3,4,6];
var f = function(e)
{
return e>100;
}
var r = v.find(f)
document.write(r);
-- OR
var v = [23,45,6,7,8,89,9,5,3,2,1,1,2,45,6,7,5,3,4,6];
var r = v.find(e=>e>100)
document.write(r);
OUTPUT: undefined
Getting first even element
var v = [23,45,6,7,8,89,9,5,3,2,1,1,2,45,6,7,5,3,4,6];
var f = function(e,i,a)
{
return e%2==0;
}
var r = v.find(f)
document.write(r);
--OR
var v = [23,45,6,7,8,89,9,5,3,2,1,1,2,45,6,7,5,3,4,6];
var r = v.find(e=>e%2==0)
document.write(r);
OUTPUT: 6
Lets suppose we have an JSON we want to find first element using any of its property.
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": "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"
}
},
];
const findColorByName = function (arr, propertyName, propertyValue) {
return arr.find((o) => { return o[propertyName] === propertyValue; });
};
var f = findColorByName(color,"color","red");
console.log(JSON.stringify(f));
OUTPUT: {"color":"red","category":"hue","type":"primary","code":{"rgba":[255,0,0,1],"hex":"#FF0"}}
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.