Question

将数组显示到html页面vbgcbv

Answer 1

要获得预期结果，请通过parseInt将userStar更改为数字

hotel.stars >= parseInt(userStar);

如果星号等于或大于useStar

，则创建Li元素并添加到UL元素

class Hotel {
  constructor(name, stars, distance, wifi, pool, price) {
    this.name = name;
    this.stars = stars;
    this.distance = distance;
    this.wifi = wifi;
    this.pool = pool;
    this.price = price;
  }
}

var hotels = [];
hotels.push(new Hotel("The Grand", "5", "0.5", "yes", "no", "190"));
hotels.push(new Hotel("The Plaza", "4", "1", "yes", "yes", "70"));
hotels.push(new Hotel("The Lord Miliburn", "4", "5", "yes", "no", "65"));
hotels.push(new Hotel("The Grange", "3", "1", "yes", "no", "57"));
hotels.push(new Hotel("The Windmill", "1", "10", "no", "no", "5"));
hotels.push(new Hotel("The Excel", "3", "0.5", "yes", "no", "56"));
hotels.push(new Hotel("The Ritz", "2", "5", "yes", "no", "14"));
hotels.push(new Hotel("The Victoria", "4", "0.5", "yes", "no", "80"));
hotels.push(new Hotel("Pheonix House", "4", "1", "yes", "No", "72"));
hotels.push(new Hotel("The Lodge", "2", "1", "no", "no", "25"));
hotels.push(new Hotel("The Sanctum", "5", "2", "yes", "yes", "180"));

const userStar = prompt("What would you like the minimum hotel star rating, to be?");
const matchingStars = hotels.filter(function(hotel) {
  console.log(userStar)
  var li = document.createElement('LI')
  if(hotel.stars >= parseInt(userStar)){
         li.innerHTML = hotel.stars >= parseInt(userStar) ? hotel.name :''
         document.getElementById("insert").appendChild(li);
     }

  return hotel.stars >= parseInt(userStar);

});
console.log(matchingStars);

代码示例 - https://codepen.io/nagasai/pen/BxaxXe

Answer 2

可能不是最佳选择，但如果您只需要打印名称，可以替换它：

const userStar = prompt("What would you like the minimum hotel star rating, to be?");
const matchingStars = hotels.filter(function (hotel) {
    return hotel.stars >= userStar;
    document.getElementById("insert").innerHTML = "write me to the screen";
});
console.log(matchingStars);

为此：

window.onload = () => {
    const userStar = prompt("What would you like the minimum hotel star rating, to be?");
    const matchingStars = hotels.filter(function (hotel) {
        return hotel.stars >= userStar;
    });
    for (var i = 0; i < matchingStars.length; i++)
        document.getElementById("insert").innerHTML += matchingStars[i].name + "<br>";
}

window.onload中的函数是必需的，否则在尝试设置null元素的innerHTML时会出现消息错误。

Answer 3

您的return语句导致更新innerHTML的行永远不会被评估。如果您切换线条，那么“插入”元素将填充“将我写入屏幕”。我还将您的=更改为+=，以便列出每次迭代而不是最后一次迭代。

如果你想编写特定字段，那么你需要引用正在迭代的酒店对象（或者简单地传回数组并稍后映射）：

const matchingStars = hotels.filter(function(hotel) {
    document.getElementById("insert").innerHTML += hotel.name;
    return hotel.stars >= userStar;
});

您还可以使用模板文字，它允许您在不使用连接的情况下引用值：

document.getElementById("insert").innerHTML += `${hotel.name}: ${hotel.stars}<br>`;

Answer 4

由于它位于您的insert声明之后，您永远无法达到您在return ID中放置内容的声明。这是对你正在寻找什么的想法吗？这是一个非常粗略的草稿，用于输出数据（没有CSS，使用旧的table技术等，我不建议，但为了示例而使用）。

＆＃13;

class Hotel {
  constructor(name, stars, distance, wifi, pool, price) {
    this.name = name;
    this.stars = stars;
    this.distance = distance;
    this.wifi = wifi;
    this.pool = pool;
    this.price = price;
  }
}

var buildHTML = function(matchingStars) {
  var builderString = "";

  for (var star in matchingStars) {
    var hotel = matchingStars[star];
    builderString += "<td>";
    builderString += "Name: " + hotel.name + "<br/>";
    builderString += "Stars: " + hotel.stars + "<br/>";
    builderString += "Distance: " + hotel.distance + "<br/>";
    builderString += "Wifi: " + hotel.wifi + "<br/>";
    builderString += "Pool: " + hotel.pool + "<br/>";
    builderString += "Price: $" + hotel.price + "<br/>";
    builderString += "</td>";
  }

  return builderString;
};

var hotels = [];
hotels.push(new Hotel("The Grand", "5", "0.5", "yes", "no", "190"));
hotels.push(new Hotel("The Plaza", "4", "1", "yes", "yes", "70"));
hotels.push(new Hotel("The Lord Miliburn", "4", "5", "yes", "no", "65"));
hotels.push(new Hotel("The Grange", "3", "1", "yes", "no", "57"));
hotels.push(new Hotel("The Windmill", "1", "10", "no", "no", "5"));
hotels.push(new Hotel("The Excel", "3", "0.5", "yes", "no", "56"));
hotels.push(new Hotel("The Ritz", "2", "5", "yes", "no", "14"));
hotels.push(new Hotel("The Victoria", "4", "0.5", "yes", "no", "80"));
hotels.push(new Hotel("Pheonix House", "4", "1", "yes", "No", "72"));
hotels.push(new Hotel("The Lodge", "2", "1", "no", "no", "25"));
hotels.push(new Hotel("The Sanctum", "5", "2", "yes", "yes", "180"));

const userStar = prompt("What would you like the minimum hotel star rating, to be?");
const matchingStars = hotels.filter(function(hotel) {
  return hotel.stars >= userStar;
});
//console.log(matchingStars);

var htmlString = buildHTML(matchingStars);

document.getElementById("insert").innerHTML = "<table cellpadding='1' cellspacing='5' border='1'><tr>" + htmlString + "</tr></table>";

＆＃13;

<div id="insert">

</div>

＆＃13;

Answer 5

数组是一个对象数组，在运行过滤器后，一个简单的for循环将迭代数组，你可以指定返回哪些信息并添加到innerHTML。

   const userStar = prompt("What would you like the minimum hotel star rating, to be?");
    const matchingStars = hotels.filter(function(hotel) {
      return hotel.stars >= userStar;
    });
    let data = ' '
    for(let i = 0; i < matchingStars.length; i++){
        data += ' ' + matchingStars[i].name
     document.getElementById("insert").innerHTML = data
     }
    console.log(matchingStars);

jsfiddle

并使用该数据MDN

的模板文字

将数组显示到html页面

5 个答案: