带有 Google Sheet API 的 Live Json 数据搜索 Ajax jQuery

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>