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