我正在尝试调用 API 并显示列表形式的数据，我面临的问题是我能够拆分列表并将其显示在 HTML 页面中，但是我需要针对数据显示适当的标签。非常感谢这方面的任何帮助。谢谢。
我从 API 调用中得到的数据是:
[[236,1,"1537890525704.jpg","","Residential","Rent",1200],
[235,1,null,"","Residential","Rent",10000]]
我在 HTML 页面上显示数据的方式是:
我想要显示的方式是针对数据的适当标签，例如:
Property Id : 236
No. of Bedrooms: 1
Property Type : Residential
等等..
client.html
<html>
<head>
<title>Test client application</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="cleint.js"></script>
<style>
.card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 40%;
}
.card:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
padding: 2px 16px;
}
</style>
</head>
<body>
<p id="msgs" class="card container"></p>
client.js
$(document).ready(function() {
$.ajax({
url: "http://192.168.1.5:8000/fetch",
success: function(data){
var c=data;
}
}).then(function(data) {
var text = "";
var res = "";
var i;
for(var i=0; i<data.length; i++){
var prop = data[i];
for(var j=0;j<prop.length;j++){
$('#msgs').append($('<div>').text(prop[j]));
}
}
});
function display(str) {
$('#msgs').append($('<div>').text(str));
}
});
最佳答案
您需要在循环内构建 HTML 输出。由于每个属性都包含在一个数组中，因此您需要通过索引直接访问它，而不是通过另一个内部循环。试试这个:
var data = [
[236, 1, "1537890525704.jpg", "", "Residential", "Rent", 1200],
[235, 1, null, "", "Residential", "Rent", 10000]
]
data.forEach(function(prop) {
var html = `<p>Property Id: ${prop[0]}</p><p>No. of Bedrooms: ${prop[1]}</p><p>Property Type: ${prop[4]}</p>`;
$('#msgs').append(`<div>${html}</div>`);
});#msgs div {
border: 1px solid #C00;
padding: 10px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msgs"></div>关于javascript - 如何显示从二维数组的 API 调用中获取的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53427597/