尝试使用 Javascript 将排序后的对象数组显示为 HTML

问题描述 投票：0回答：1

我正在做一项玻璃作业，我需要编写一个循环。我为房屋制作了一系列物品。我创建了一个 For 循环来按房屋价格对数组进行排序。该数组显示在网页的控制台中，但不显示在实际网页中。以下是控制台显示内容、网页显示内容和我的代码的摘录。

console log

  1. (4) [{…}, {…}, {…}, {…}]

    1. 0：{id：'house4'，故事：1，平方英尺：1130，颜色：'白色'，年份：1961，...}

    2. 1：{id：'house1'，故事：1，平方英尺：1285，颜色：'米色'，年份：2018，...}

    3. 2：{id：'house2'，故事：1，平方英尺：1560，颜色：'棕色'，年份：1983，...}

    4. 3：{id：'house3'，故事：2，平方英尺：2975，颜色：'tan'，年份：2008，...}

    5. 长度：4

    6. [[原型]]：数组(0)

webpage

[对象对象],[对象对象],[对象对象],[对象对象]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <p id ="houses"></p>

  <script>

  let houses = [{id:"house1", stories:1, squareFoot:1285, color:"beige", year:2018, bedrooms:3, bathrooms:2, price:285000},
                {id:"house2", stories:1, squareFoot:1560, color:"brown", year:1983, bedrooms:3, bathrooms:3, price:345000}, 
                {id:"house3", stories:2, squareFoot:2975, color:"tan", year:2008, bedrooms:4, bathrooms:3, price:415000}, 
                {id:"house4", stories:1, squareFoot:1130, color:"white", year:1961, bedrooms:2, bathrooms:2, price:215000}];

  for (i=0; i<1; i++) {
    houses.sort((a, b) => a.price - b.price);
    document.getElementById("houses").innerHTML=houses;
    }
  //console.log(houses);

  </script>

</body>
</html>

我看过几个关于数组排序的视频，但它们都只显示到控制台日志。我尝试修改我的代码以使其与我的讲座视频中使用的示例类似，但仍然没有输出。任何帮助将不胜感激。谢谢。

javascript html
1个回答
0
投票

有几点值得注意。

for循环

请注意，

for
循环内的两个语句不依赖于索引
i
：

houses.sort((a, b) => a.price - b.price);
document.getElementById("houses").innerHTML=houses;

这意味着每次循环时您只是重复相同的操作。所以不需要循环！ 

sort
方法将数组排序为一行。

但是，如果你的作业是使用

for
循环，我猜你不能使用内置的
sort
方法，重点是你要编写自己的排序函数。

这取决于你；请注意，事实上，以下

for
：

for (i=0; i<1; i++)

仅循环一次。从这里开始，您将必须更换线路

houses.sort((a, b) => a.price - b.price);

具有您自己的排序功能。

HTML 输出

您已经看到，将 HTML 段落的文本设置为 

houses
不会显示数组的内容。那是因为它是 - 令人惊讶 - 一个数组1。 HTML 处理文本，因此要实现您的目标，您首先需要将 
houses
转换为文本。

有多种方法可以做到这一点，但最佳实践可能是使用 

JSON.stringify
方法，将对象的内容解析 为字符串。您可以在以下代码片段中看到其效果：

let houses = [{id:"house1", stories:1, squareFoot:1285, color:"beige", year:2018, bedrooms:3, bathrooms:2, price:285000},
                {id:"house2", stories:1, squareFoot:1560, color:"brown", year:1983, bedrooms:3, bathrooms:3, price:345000}, 
                {id:"house3", stories:2, squareFoot:2975, color:"tan", year:2008, bedrooms:4, bathrooms:3, price:415000}, 
                {id:"house4", stories:1, squareFoot:1130, color:"white", year:1961, bedrooms:2, bathrooms:2, price:215000}];

houses.sort((a, b) => a.price - b.price);
document.getElementById("houses").innerHTML = JSON.stringify(houses);

console.log(houses);
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <p id ="houses"></p>
  </body>
</html>

参考文献

JSON.stringify()


1任何其他对象都会以相同的方式表现。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.