在控制台中显示过滤值时出错

我想使用来自对象'emp'的map和filter显示年龄小于26岁的人的姓名和年龄。我想要的数据去在HTML中的#app id，并显示当我打开的文件与实时服务器扩展。
我希望它从Javascript中显示而不改变HTML文件中的任何内容。
它应该是这样显示的:name: age
但是我不能弄清楚，javaScript显示TypeError当我使用app.innerHTML

例如:

let emp = [
{
name: "abc",
age: 30
},
{
name: "xyz",
age: 25
},
{
name: "cde",
age: 20
},
{
name: "fgh",
age: 28
}
];

输出:
xyz: 25
cde: 20

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q1</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app"></div>
<!-- JavaScript -->
<script src="./script.js"></script>
</body>
</html>

JavaScript代码:

let emp = [
{
name: "abc",
age: 30
},
{
name: "xyz",
age: 25
},
{
name: "cde",
age: 20
},
{
name: "fgh",
age: 28
}
];

const result = emp.filter((val) => {
return val.age < 26;
});
console.log(result);
let app = document.getElementById("app");
result.forEach((val) => {
const newInfo = `${val.name} : ${val.age}`;
console.log("Data -> ", newInfo);
const prevInfo = app.innerHTML;
app.innerHTML = prevInfo + newInfo;
});

似乎错误是你试图在javascript代码中获得一个id为app的元素，但只有这个类的元素。要更改它，使用以下HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q1</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app"></div>
<!-- JavaScript -->
<script src="./script.js"></script>
</body>
</html>

正如其他人已经提到的。

你也可能不想每次都替换内容，而只是想添加一些东西。此外，.map不是正确的函数，您可能希望在这里使用forEach。完整的javascript代码是:

let emp = [
{
name: "abc",
age: 30
},
{
name: "xyz",
age: 25
},
{
name: "cde",
age: 20
},
{
name: "fgh",
age: 28
}
];

const result = emp.filter((val) => {
return val.age < 26;
});
let app = document.getElementById("app");
result.forEach((val) => {
const dataToShow = `${val.name} : ${val.age}`;
console.log("Data -> ", dataToShow);
app.innerHTML += `${dataToShow}<br>`;
});

数组。map用于更改数组中的值，而forEach仅对其进行迭代

只需将class="app"替换为id="app"即可。

let emp = [
{
name: "abc",
age: 30
},
{
name: "xyz",
age: 25
},
{
name: "cde",
age: 20
},
{
name: "fgh",
age: 28
}
];

const result = emp.filter((val) => {
return val.age < 26;
});
let app = document.getElementById("app");
result.map((val) => {
const dataToShow = `${val.name} : ${val.age}`;
console.log("Data -> ", dataToShow);
app.innerHTML =`${dataToShow}`;
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Q1</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app"></div>
<!-- JavaScript -->
<script src="./script.js"></script>
</body>
</html>

我只需要使用模板文字并将newInfo和prevInfo存储到段落标签中因为它们是块元素它们将占用整个长度而新信息将出现在不同的行

JavaScript代码:

let emp = [
{
name: "abc",
age: 30
},
{
name: "xyz",
age: 25
},
{
name: "cde",
age: 20
},
{
name: "fgh",
age: 28
}
];

const result = emp.filter((val) => {
return val.age < 26;
});
console.log(result);
let app = document.getElementById("app");
result.forEach((val) => {
const newInfo = `${val.name} : ${val.age}`;
console.log("Data -> ", newInfo);
const prevInfo = app.innerHTML;
app.innerHTML = `<p>${prevInfo}</p> <p>${newInfo}</p>`;
});

相关内容

最新更新

热门标签：