我是 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 關注
- 143 瀏覽
添加回答
舉報
0/150
提交
取消