使用for循環在基本html表中顯示來自服務器的json數據，僅javascript，for循環有問題嗎？

Question

我有以下 Javascript 代碼：

var request = new XMLHttpRequest();

request.open("GET", "http://localhost:8080/CarSales/rest/cars", true);
request.onreadystatechange = function(){
    if(request.readyState === XMLHttpRequest.DONE){
        var status = request.status;
        if (status === 0 || (status >= 200 && status < 400)){
            var cars = JSON.parse(request.responseText);
            var output = "";
            for(var i in cars){
                output ='<tr><td>'+cars[i].make+'</td><td>'+cars[i].model+'</td><td>'+cars[i].year+'</td> <td>'+cars[i].engine+'</td></tr>';
            }

            document.getElementById('table-body').innerHTML = output;
        }else{
            console.log("error");
        }
    }
};  
request.send();

以及以下 HTML：

<!DOCTYPE html>
<html>
<head>

<script src="js/Q4.js"></script>

<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
    <table id="table">
        <tr>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
            <th>Engine</th>
        </tr>
        <tbody id="table-body"></tbody>
    </table>

</body>
</html>

目前它正確輸出表中json數據的最后一個object： https://i.stack.imgur.com/V73pC.png

如何將 output 所有 json 對象的 JS 代碼放入表中？ 也許通過更改 for 循環來遍歷 json 數據？

Answer 1

您在每個循環中都錯過了 append。 只需在 output + = "" 之后添加它沒有附加這就是只顯示最后一個循環值的原因。

for(var i in cars){
    output +='<tr><td>'+cars[i].make+'</td><td>'+cars[i].model+'</td><td>'+cars[i].year+'</td> <td>'+cars[i].engine+'</td></tr>';
}

使用for循環在基本html表中顯示來自服務器的json數據，僅javascript，for循環有問題嗎？

問題描述

1 個解決方案

解決方案1
0 2020-04-26 18:40:05

使用for循環在基本html表中顯示來自服務器的json數據，僅javascript，for循環有問題嗎？

問題描述

1 個解決方案

解決方案1 0 2020-04-26 18:40:05

解決方案1
0 2020-04-26 18:40:05