How to search JSON tree with the help of jQuery ?

Last Updated : 01 Aug, 2024

In this article, we are given a JSON Object’s tree and the task is to find a particular piece of information. Suppose we want to find the information about a particular person in that object then how do we do that? Here are two approaches that are discussed below:

Approach 1: In this approach, we will use each() method and pass the real array of objects to the method by using the dot operator, and then in the anonymous function find the person by comparing its name.

Example: This example shows the use of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search JSON Tree with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <style>
        body {
            text-align: center;
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        h1 {
            color: #4CAF50;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 600px;
            width: 100%;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        pre {
            text-align: left;
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        #GFG_DOWN {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <div class="container">
        <pre id="GFG_UP"></pre>
        <button id="searchBtn">Click Here</button>
        <p id="GFG_DOWN"></p>
    </div>
    <script>
        $(document).ready(function() {
            var GFG_Object = {
                "livingBeing": {
                    "Human": [
                        {
                            "name": "GFG_1",
                            "age": 20,
                            "sex": "male"
                        },
                        {
                            "name": "GFG_2",
                            "age": 21,
                            "sex": "female"
                        }
                    ]
                }
            };

            $("#GFG_UP").html(
                "Click on the button to search in the JSON tree.<br>Object - " +
                JSON.stringify(GFG_Object, null, 2)
            );

            $("#searchBtn").click(function() {
                $.each(GFG_Object.livingBeing.Human, function(i, v) {
                    if (v.name == "GFG_1") {
                        $("#GFG_DOWN").html("The age of person ('GFG_1') is " + v.age);
                        return false; // Exit the loop
                    }
                });
            });
        });
    </script>
</body>
</html>

Output:

Output1

Approach 2: In this approach, we will use grep() method and pass the actual array of objects to the method by using the dot operator, then return the object which matches the criteria and then print the age of the person.

Example: This example shows the use of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search JSON Tree with jQuery - Approach 2</title>
    <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
    <style>
        body {
            text-align: center;
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        h1 {
            color: #4CAF50;
        }
        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            max-width: 600px;
            width: 100%;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #45a049;
        }
        pre {
            text-align: left;
            background-color: #f8f8f8;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        #GFG_DOWN {
            margin-top: 20px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>GeeksForGeeks</h1>
    <div class="container">
        <pre id="GFG_UP"></pre>
        <button id="searchBtn">Click Here</button>
        <p id="GFG_DOWN"></p>
    </div>
    <script>
        $(document).ready(function() {
            var GFG_Object = {
                "livingBeing": {
                    "Human": [
                        {
                            "name": "GFG_1",
                            "age": 20,
                            "sex": "male"
                        },
                        {
                            "name": "GFG_2",
                            "age": 21,
                            "sex": "female"
                        }
                    ]
                }
            };

            $("#GFG_UP").html(
                "Click on the button to search in the JSON tree.<br>Object - " +
                JSON.stringify(GFG_Object, null, 2)
            );

            $("#searchBtn").click(function() {
                var res = $.grep(GFG_Object.livingBeing.Human, function(element, index) {
                    return element.name === 'GFG_1';
                });
                if (res.length > 0) {
                    $("#GFG_DOWN").html("The age of person ('GFG_1') is " + res[0].age);
                } else {
                    $("#GFG_DOWN").html("Person not found.");
                }
            });
        });
    </script>
</body>
</html>

Output:

Output2

How to Update JSON Object Value Dynamically in jQuery?

PranchalKatiyar

Improve

Article Tags :

How to search JSON tree with the help of jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?