Live Json Data Search Ajax jQuery with Google Sheet API

Question

I am looking for a live data search with spreadsheets 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'];

actual, I am facing the main problem in fetching the data.

console log shows me the "Uncaught ReferenceError: i is not defined" I am using the PHP extension

$(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

You need to move the lines INSIDE the loop and assign i from the index of the each

However this is MUCH improved - I do a filter and then an assign of LIs:

I removed the location search, since I do not see a location in the data

$(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>