NEWS: Total Picture Views: 144711 | Total Article Views: 152428 | Top 5 Most Popular Article: 1. Am I Stuck Algorithm with Becker Robot | 2. How to read a JSON and work with it | 3. PickUpThings with Becker Robot | 4. Encrypted Data GUI (Download .Zip) | 5. Create Wall and Things with Becker

Search And Find Between From A JSON File Javascript

Description:

In this example, you will be able to see how you can do a search from a json file or find between two different times.

You can see the code example here: LINK

Code:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Example 13</title>
    <script type="text/javascript">
        function find(){
            var lname = document.getElementById("search").value;
            var xml = new XMLHttpRequest();
            xml.open("GET", "json.json", true);
            xml.onreadystatechange = function(){
                if(xml.readyState == 4 && xml.status == 200){
                    var data = JSON.parse(xml.responseText);
                    var out = document.getElementById("output");
                    var info = "";
                    info +=("<table border='1'><tr><th>First Name</th><th>Last Name</th><th>Year</th><th>Department</th></tr>")
                    for(var object in data){
                        if(data[object].L_Name == lname){
                            info += "<tr><td>" + data[object].F_Name + "</td><td>" + data[object].L_Name + "</td><td>" + data[object].Year + "</td><td>" + data[object].Department + "</td></tr>";
                        }
                    }
                    info +=("</table>");
                    out.innerHTML = info;
                }
            };
            xml.send();
        }

        function getBetween(){
            var early = document.getElementById("early").value;
            var late = document.getElementById("latest").value;
            var xml = new XMLHttpRequest();
            xml.open("GET", "json.json", true);
            xml.onreadystatechange = function(){
                if(xml.readyState == 4 && xml.status == 200){
                    var data = JSON.parse(xml.responseText);
                    var out = document.getElementById("output");
                    var info = "";
                    info +=("<table border='1'><tr><th>First Name</th><th>Last Name</th><th>Year</th><th>Department</th></tr>")
                    for(var object in data){
                        if(data[object].Year >= early && data[object].Year <= late){
                            info += "<tr><td>" + data[object].F_Name + "</td><td>" + data[object].L_Name + "</td><td>" + data[object].Year + "</td><td>" + data[object].Department + "</td></tr>";
                        }
                    }
                    info +=("</table>");
                    out.innerHTML = info;
                }
            };
            xml.send();
        }

        function readJSON(){

        }
    </script>
</head>
<body>
    <table>
        <tr>
            <td>Search</td>
            <td><input type="text" id="search"></td>
            <td colspan="2"><button onclick="find()">Search</button></td>
        </tr>
    </table>

    <h3>Find between</h3>
    <table>
        <tr>
            <th>Earliest</th>
            <th>Latest</th>
        </tr>
        <tr>
            <td><input type="number" id="early"></td>
            <td><input type="number" id="latest"></td>
        </tr>
        <tr>
            <td colspan="2"><button onclick="getBetween()">Find</button></td>
        </tr>
    </table>


    <div id="output">

    </div>
</body>
</html>

<!-- json,json -->
{
  "ID-101": {"F_Name" : "Chrish", "L_Name" : "Harish", "Year" : 1980, "Department" : "Computer"},
  "ID-102": {"F_Name" : "Robin", "L_Name" : "Smith", "Year" : 1984, "Department" : "Business"},
  "ID-103": {"F_Name" : "Jessica", "L_Name" : "Hudson", "Year" : 1974, "Department" : "Human Ressource"}

}
Attachments: None

Tags: JSON Search Between input Function innerHTML

Total Views: 935

My name is Jean-Mathieu

I created this website so other people could enjoy finding useful stuff easier. If you have any question do not hesitate to contact me.

jean8mathieuCreated on 04/08/15


affiliate_link

Disclosure: We are a website that needs compensation to operate like any other website on the internet.
We may receive consideration for our reviews but we are totally unbiased and do not accept paid reviews or fake reviews claiming to be something they are not.