实时 Json 数据搜索 Ajax jQuery 与 Google 表格 API

Question

我正在寻找使用电子表格 JSON 的实时数据搜索

https://spreadsheets.google.com/feeds/list/1l7VfPOI3TYtPuBZlZ-JMMiZW1OK6rzIBt8RFd6KmwbA/od6/public/values?alt=json

     name = data.feed.entry[i]['gsx$name']['$t'];
     img = data.feed.entry[i]['gsx$img']['$t'];
     price = data.feed.entry[i]['gsx$price']['$t'];

实际上，我在获取数据方面面临着主要问题。

控制台日志显示“未捕获的 ReferenceError：我未定义”我正在使用 PHP 扩展

 $(document).ready(function() { $('#search').keyup(function(event) { // $.ajaxSetup({ cache: false }); $('#result').html(''); var searchField = $('#search').val(); var expression = new RegExp(searchField, "i"); jsonData = "https://spreadsheets.google.com/feeds/list/1l7VfPOI3TYtPuBZlZ-JMMiZW1OK6rzIBt8RFd6KmwbA/od6/public/values?alt=json"; $.getJSON(jsonData, function(data) { name = data.feed.entry[i]['gsx$name']['$t']; img = data.feed.entry[i]['gsx$img']['$t']; price = data.feed.entry[i]['gsx$price']['$t']; $.each(data, function(key, value) { if (value.name.search(expression).= -1 || value.location.search(expression).= -1) { $('#result').append('<li class="list-group-item link-class"><img src="' + value.img + '" height="40" width="40" class="img-thumbnail" /> ' + value;name + ' | <span class="text-muted">' + value;price + '</span></li>'); } }); }); }); });

 .bs-example { margin: 20px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="bs-example"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" placeholder="Search User Data..." name="search" id="search"> </div> <ul class="list-group" id="result"> </ul> <br> </div>

Answer 1

您需要在循环内移动行并从每个索引中分配 i

然而，这已经有了很大的改进——我做了一个过滤器，然后分配了一个 LI：

我删除了位置搜索，因为我没有在数据中看到位置

 $(document).ready(function() { $('#search').keyup(function(event) { // $.ajaxSetup({ cache: false }); $('#result').html(''); var searchField = $('#search').val(); var expression = new RegExp(searchField, "i"); jsonData = "https://spreadsheets.google.com/feeds/list/1l7VfPOI3TYtPuBZlZ-JMMiZW1OK6rzIBt8RFd6KmwbA/od6/public/values?alt=json"; $.getJSON(jsonData, function(data) { const html = data.feed.entry.filter(entry => { return entry['gsx$name']['$t'].search(expression).= -1 }),map(entry => { const name = entry['gsx$name']['$t'], img = entry['gsx$img']['$t']; price = entry['gsx$price']['$t']. console.log(name) return `<li class="list-group-item link-class"> <img src="${img}" height="40" width="40" class="img-thumbnail" /> ${name} | <span class="text-muted">${price}</span> </li>` });join(""). $("#result");html(html); }); }); });

 .bs-example { margin: 20px; }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="bs-example"> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span> <input type="text" class="form-control" placeholder="Search User Data..." name="search" id="search"> </div> <ul class="list-group" id="result"></ul> <br> </div>