我是 javascript 的初学者，每天都在尝试学习，在这里我尝试从带有端点的 url 获取 json 数据，由于某种原因，数据没有进入“表”，我可以在表中看到它，但不能在表上看到它console.log。我的 json 数据如下所示：{ "id": "145127236", "mygoals": "success", "future": "high", "dole": { "Key": "fhd699f" }}我的代码是这样的：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <style> </style> </head><body><div class="container"> <table class="table table-stripped"> <thead> <tr> <th> emp id</th> <th> emp mygoals</th> <th> emp future</th> </tr> </thead> <tbody id="data" > </tbody> </table</div> <script> fetch("https://sp*****.com/get/henkilot/98765432/sijoitus", { method: "GET", headers: { "x-api-key": "p*****w" } } ).then(res =>{ res.json().then( data=> { console.log(data); if(data.length > 0){ var temp =""; data.forEach((u) =>{ temp +="<tr>"; temp += "<td>"+u.id+"</td>"; temp += "<td>"+u.mygoals+"</td>"; temp += "<td>"+u.future+"</td></tr>"; }) document.getElementById("data").innerHTML = temp } } ) } ) .catch(err => { console.log("ERROR: " + err); }); </script></body></html>
2 回答
Smart猫小萌
TA贡献1911条经验 获得超7个赞
您在问题中编写的 JSON 数据似乎不是数组，因此不需要迭代数据。一种选择是删除forEach或修复端点响应（如果您有权访问它）。
这是认为端点不响应数组的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<table class="table table-stripped">
<thead>
<tr>
<th> emp id</th>
<th> emp mygoals</th>
<th> emp future</th>
</tr>
</thead>
<tbody id="data" >
</tbody>
</table>
</div>
<script>
fetch("https://asdasd.free.beeceptor.com/a",
{
method: "GET",
headers: {
"x-api-key": "p*****w"
}
}
).then(res =>{
res.json().then(
data=> {
console.log(data);
var temp ="";
temp +="<tr>";
temp += "<td>"+data.id+"</td>";
temp += "<td>"+data.mygoals+"</td>";
temp += "<td>"+data.future+"</td></tr>";
document.getElementById("data").innerHTML = temp
}
)
}
)
.catch(err => {
console.log("ERROR: " + err);
});
</script>
</body>
</html>
绝地无双
TA贡献1946条经验 获得超4个赞
你的牙套太疯狂了，
试试：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<table class="table table-stripped">
<thead>
<tr>
<th> emp id </th>
<th> emp mygoals </th>
<th> emp future </th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
</div>
<script>
const tableData = document.getElementById("data")
;
fetch("https://sp*****.com/get/henkilot/98765432/sijoitus",
{ method: "GET"
, headers: { "x-api-key": "p*****w" }
})
.then(res=>res.json())
.then(data=>
{
console.log(data)
data.forEach(u=>
{
let newRow = tableData.insertRow()
newRow.insertCell().textContent = u.id
newRow.insertCell().textContent = u.mygoals
newRow.insertCell().textContent = u.future
})
})
.catch(err => console.log("ERROR: " + err) );
</script>
</body>
</html>
- 2 回答
- 0 关注
- 86 浏览
添加回答
举报
0/150
提交
取消