Question

我有一个JSON文件，我使用jQuery调用。我使用了一个jQuery UI滑块，它需要最低和最高价格。当我点击提交按钮时，它应显示该范围内的所有酒店名称。这是我的代码：

var params = {
  checkIn: '20160505',
  checkOut: '20160509',
  location: 'mco'
}

$('#submitform').on('click', function() {
  var min_price = $('#slider').slider("values", 0);
  var max_price = $('#slider').slider("values", 1);
  alert(min_price);
  alert(max_price);
  var urlBase = 'api/data.json';

  $.get(urlBase, params)
    .done(function(hotels) {
      //  $.get(urlBase, params)
      //        .done( function( hotels ) {
      var table = document.createElement("table");
      $('#data').append(table)
      for (var i = min_price; i <= hotels.length; i++) {
        for (var j = max_price; j <= hotels.length; j--) {
          var tr = document.createElement("tr");
          var nametd = document.createElement("td");
          nametd.innerHTML = hotels[i].name
          var pricetd = document.createElement("td");
          pricetd.innerHTML = hotels[i].ratesSummary.minPrice
          var ratingtd = document.createElement("td")
          ratingtd.innerHTML = hotels[i].starRating
          var guesttd = document.createElement("td")
          guesttd.innerHTML = hotels[i].overallGuestRating
          table.appendChild(tr)
          tr.appendChild(nametd);
          tr.appendChild(pricetd);
          tr.appendChild(ratingtd);
          tr.appendChild(guesttd);
        }
      }
      $('#data').append(table)
    });
});

$(function() {
  $("#slider").slider({
    range: true,
    min: 35,
    max: 165
  });
});

Answer 1

将您的循环更改为：

for (var i = 0; i < hotels.length; i++) {
    if (hotels[i].price < min_price || hotels[i].price > max_price) {
        continue; // skip hotel out of price range
    }
    var tr = document.createElement('tr');
    ...
}

您的代码使用数组索引作为价格，并且无缘无故地使用嵌套循环。

从JSON文件中获取数据

1 个答案: