JavaScript/Jquery reading a json file

Question

So I have this search box on the main page of my web, and I would like it to serve as a "search a car by name from the gallery (jason file)" and display the car to the user, Now I am not quite sure how to achieve this goal, any help with the actual code would be very appreciated.

My jason file:

{
"cars" :
    [
        {
            "model": "Mazda Nagare",
            "year": "2013",
            "country": "Japan",
            "plate": "y72-28f-609",
            "price": "220,000",
            "pic" : "images/MazdaNag.jpg"
        },  
        {
            "model": "BMW M135i",
            "year": "2011",
            "country": "Germany",
            "plate": "bmw-016-ur2",
            "price": "140,000",
            "pic" : "images/BMWM135i.jpg"
        },  
        {
            "model": "Mazda 6",
            "year": "2007",
            "country": "Germany",
            "plate": "x57-6u6-fev",
            "price": "110,000",
            "pic" : "images/Mazda6.jpg"
        },  
        {
            "model": "Toyota 9T",
            "year": "2013",
            "country": "Japan",
            "plate": "qwe-rty-013",
            "price": "390,000",
            "pic" : "images/toyota_9turbo.jpg"
        },  
        {
            "model": "Toyota GTS",
            "year": "2012",
            "country": "Japan",
            "plate": "6r2-x0r-65y",
            "price": "177,000",
            "pic" : "images/ToyotaGts.jpg"
        },  
        {
            "model": "Toyota GT-86",
            "year": "2013",
            "country": "Japan",
            "plate": "ca1-pw9-n3x",
            "price": "260,000",
            "pic" : "images/ToyotaGt86.jpg"
        }
    ]

}

My search box and button (Which opens a new blank page, that I made for the search results):

<div id="searchBox" data-theme="a">
    <input type="search" placeholder="Search for a car by name">
    </div>
<div class="smallButtonStyle">
    <input type="button" value="Search" onClick="location.href='#search'" data-icon="arrow-r" data-transition="slide"/>

Take a look at [this answer](http://stackoverflow.com/questions/1946165/json-find-in-javascript). It should give all the information you need. — Edgar Allan Pwn, Mar 16 '13 at 18:19
jqueryUI Autocomplete looks good, but this lets me put names of cars inside the search box, it doesn't help me actually executing the search and displaying the car/info from the json. — user1924895, Mar 16 '13 at 18:29

score 1 · Accepted Answer · edited May 23 '17 at 12:28

I suggest you take a look at this stackoverflow answer However, if you just want the code, you can query your json with this javascript.

The idea is to use a function to retrieve the value of the input element and brute force through the array for the name. If this is all you are doing, it would be much faster to have the array of cars be an object instead (with the keys of the object being the car names). Good luck.

<script>
var jsonArray = {}; //your json array
var mySearchFunction = function () {
    var the_searched_name = document.getElementById("my_search").value;
    for (car in jsonArray["cars"]) {
      if (car["model"] == the_searched_name) {
        // Do something with 'car' 
      }
    }
};
</script>


<div id="searchBox" data-theme="a">
    <input id="my_search" type="search" placeholder="Search for a car by name">
    </div>
<div class="smallButtonStyle">
    <input type="button" value="Search" onClick="mySearchFunction()" data-icon="arrow-r" data-transition="slide"/>

One thing got me confused, the jsonArray? what do i put inside the {} ?, Not sure how do I link it to my jason file. — user1924895, Mar 16 '13 at 18:57
You would set that equal to your json array. If you're loading the array from a separate file on your server asynchronously, then take a look at [w3schools' tutorial for AJAX](http://www.w3schools.com/ajax/default.asp) — Edgar Allan Pwn, Mar 17 '13 at 15:42

JavaScript/Jquery reading a json file

1 Answers1