In this tutorial we will show you the solution of filter array of objects javascript, we already know about filter is used to filter some values from array of objects in javascript we have built-in method filter().
Using that method with some condition we filtering only few values from array if array values not match with given condition means it will returns empty array as a result so we have to give conditions like we can retrieve some value from array.
Step By Step Guide On Filter Array Of Objects JavaScript :-
Here we defined an array object ‘obj’ within array we defined another object ‘students’ it refers all key,value pair in array.
We created array with three row of set values and using filter function with parameter ‘el’ we defined condition ‘age<=25&& el.mark<=90’ inside function so it will checks array values with respect to condition then returns accepted set value as a result.
Result stored to variable ‘newarr’ then printed on console using ‘console.log()’ method.
<!DOCTYPE html>
<html>
<head>
<title>Filter Array</title>
</head>
<body>
<script>
var obj={'students':[{"name":"dhanu","age":"24","mark":"78"},
{"name":"prawin","age":"25","mark":"98"},
{"name":"arun","age":"21","mark":"99"}]};
var newarr=obj.students.filter(function(el){
return el.age<=25 &&
el.mark<=90;
});
console.log(newarr);
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In <script> tag we defined array ‘obj’ within that we defined another object ‘students’. Here we defined three sets of key,value pair values. Those keys are ‘name,age,mark’ with created respective three different sets of values.
- This ‘obj.students.filter()’ line refers filter method appends with array object for filter some value from that array.
- Filter function defined with ‘el’ parameter, its used for access array key,value pair values. Using that we checks condition ‘age<=25&& el.mark<=90’ with array objects then result returns to array variable ‘newarr’.
- Result printed using ‘console.log()’ method. Console.log() is a function in javascript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user. Its output display on the javascript console.
- In browser for open javascript console use the shortcut ‘ctrl+shift+j’ then console panel will open at right hand side there we can see our result.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to filter array of objects in javascript.
When we execute our program on browser we can’t see the result so we have to use shortcut ‘ctrl+shift+j’ then result we will see in console as filtered value of ‘"name":"dhanu","age":"24","mark":"78"’ is displayed by using console.log().
The console.log() method only will print any message or value on the console, for general printing, value or string on webpage in javascript we had many inbuilt methods.
I hope this tutorial on filter array of objects javascript helps you and the steps and method mentioned above are easy to follow and implement.
