JavaScript/jquery阅读json文件

Question

所以我在我的网页的主页上有这个搜索框，我希望它可以作为“按照名称搜索汽车（jason文件）”并显示汽车给用户，现在我不太清楚如何实现这个目标，任何有关实际代码的帮助都将非常感激。

我杰森文件：

{ 
"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" 
     } 
    ] 

}

我的搜索框和按钮（这将打开一个新的空白页面，我对搜索结果做）：

<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"/> 

Answer 1

我建议你看看这个stackoverflow answer 但是，如果你只是想要的代码，你可以用这个javascript查询你的json。

这个想法是使用一个函数来检索输入元素的值，并通过名称的数组蛮力。如果这就是你所做的一切，那么让汽车数组成为一个对象会更快（用对象的键作为汽车名称）。祝你好运。

<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"/>