获取 json 到表（端点）
我是 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猫小萌
您在问题中编写的 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> -
绝地无双
你的牙套太疯狂了，试试：<!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>
随时随地看视频慕课网APP
相关分类
Html5