我試圖獲取此 JSON 字串/陣列并將其顯示在表格中，但在控制臺中并沒有真正發生任何事情 - “未捕獲的型別錯誤：資料未定義”
我嘗試這樣做，最好它需要在自己的 JavaScript 檔案中，而不是在 HTML 檔案中，但我只是在測驗是否可以使其作業。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th {
color: #fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>First</th>
<th>Last</th>
<th>Email</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method: 'GET',
url: 'My-Servers-API',
success: function(response) {
myArray = response.data
buildTable(myArray)
console.log(myArray)
}
})
function buildTable(data) {
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i ) {
var row = `<tr>
<td>${data[i].first_name}</td>
<td>${data[i].last_name}</td>
<td>${data[i].email}</td>
</tr>`
table.innerHTML = row
}
}
</script>如果我手動訪問 URL，它會給我這個 JSON 字串
{
"all": [
{
"id": 1,
"firstName": "Fname",
"lastName": "Lname",
"email": "[email protected]",
"phones": [
{
"number": 12344567
}
],
"hobbies": [
{
"id": 1,
"name": "golf",
"wikiLink": "www.golf.com",
"category": "ball-and-club",
"type": "outdoors"
}
],
"address": {
"street": "StreetName",
"additionalInfo": "StreetInfo",
"cityInfo": {
"zipCode": "0001",
"city": "CityName"
}
}
}
]
}
您可能已經注意到，我是 JavaScript 的完全初學者。
uj5u.com熱心網友回復：
回答這個帖子的人實際上給了我解決方案，但現在答案已經消失了，抱歉，我現在不記得你的名字了。
這就是最終為我作業的原因。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th {
color: #fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>name</th>
<th>username</th>
<th>Email</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method: 'GET',
url: 'My-Server-Url',
success: function(response) {
myArray = response
console.log(myArray)
buildTable(myArray)
}
})
function buildTable(data) {
var table = document.getElementById('myTable')
for (var i = 0; i < data.all.length; i ) {
const da = data.all[i];
var row = `<tr>
<td>${da.first_name}</td>
<td>${da.last_name}</td>
<td>${da.email}</td>
</tr>`
table.innerHTML = row
}
}
</script>謝謝大家。
uj5u.com熱心網友回復：
只需洗掉成功函式中的 .data 并確保您訪問回應物件中的“all”屬性。我不知道你的網址，所以我用 jsonplaceholder 替換了我的網址，但它基本上是一樣的
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
th {
color: #fff;
}
</style>
<table class="table table-striped">
<tr class="bg-info">
<th>name</th>
<th>username</th>
<th>Email</th>
</tr>
<tbody id="myTable">
</tbody>
</table>
<script>
var myArray = []
$.ajax({
method: 'GET',
url: 'https://jsonplaceholder.typicode.com/users',
success: function(response) {
myArray = response
console.log(myArray)
buildTable(myArray)
}
})
function buildTable(data) {
var table = document.getElementById('myTable')
for (var i = 0; i < data.length; i ) {
var row = `<tr>
<td>${data[i].name}</td>
<td>${data[i].username}</td>
<td>${data[i].email}</td>
</tr>`
table.innerHTML = row
}
}
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/314027.html
標籤：javascript json 休息