Check If Value Exists In json Object JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this tutorial we will show you the solution of check if value exists in json object JavaScript, here we used for loop for iterate json array values then using if condition we can find out whether user gave input exist within json array or not.
This concept will same as normal array with multiple values but the difference is here we need to mention key name for find out value existence.
Step By Step Guide On Check If Value Exists In json Object JavaScript :-
Here we defined two input tags for getting string input from user and submit button defined for submit user input value then defined one div tag with id ‘h’ for displaying message to instruct user about input.
In script we defined function fun(), this is appends with onclick attribute in submit button so it will called when user clicks on it.
Here we defined json array with some pair of keys and values then we collecting user inputs by id ‘str’ then stored on variable ‘inpt’ and using for loop we iterating json array values and if condition we checks whether user input is existed in json array or not.
We appended respective defined respective message on webpage by innerHTML for user.
<!DOCTYPE html>
<html>
<head>
<title>CHECKING VALUE EXIST IN JSON</title>
</head>
<body>
<input id="str" type="text" placeholder="Enter a String">
<input onclick="fun()" type="submit" value="Submit">
<div id="h"></div>
<script>
function fun(){
var JSON=[{"name":"jhon"},{"name":"kethy"}];
var inpt=document.getElementById('str').value;
for(var i=0;i<JSON.length;i++){
if(JSON[i].name == inpt){
document.getElementById('h').innerHTML="Entered value existed in json array";
}
else{
document.getElementById('h').innerHTML="Entered value not existed in json array";
}
}
}
</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 contain 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.
- Here we defined two input tags for getting input string from user and submit button for verify user submissions when user clicks on submit button by function ‘fun()’.
- Div tag defined with id attribute ‘h’. In script we defined function fun(), here we defined json array ‘JSON’ with values ‘{"name":"jhon"},{"name":"kethy"}’ then collected user entered input and stored on variable ‘inpt’.
- Using for loop we iterating each values in json array objects then using if condition we comparing user entered input with each values in array with key value ‘name’.
- If condition true means displaying success message to user otherwise displays user entered input not existed in array for user verification.
- We appended respective verified message on div element ‘h’ and it will displayed on webpage.
- 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 now we are able to know how to check value existence in array using javascript. When we executes program on browser we can see the input box with submit button.
User needs to give input string and clicks on submit button then user input values compared with json array values using if condition.
If returns true means displays ‘Entered value existed in json array’ message otherwise it displays message ‘Entered value not existed in json array’ on webpage for user verification entered input not match with array values.
I hope this tutorial on check if value exists in json object JavaScript
About Anjali
