![](/img/trans.png)
[英]displaying json data of multi dimensional array in html table fetched from api
[英]How to Display data fetched from API call which is a two dimensional array
我正在嘗試調用API並以列表形式顯示數據,我面臨的問題是我能夠拆分列表並將其顯示在HTML頁面中,但是我需要針對數據顯示適當的標簽。 非常感謝這方面的任何幫助。 謝謝..
我從API調用獲得的數據是:
[[236,1, “1537890525704.jpg”, “”, “住宅”, “租借”,1200],[235,1,NULL, “”, “住宅”, “租借”,10000]]
我在HTML頁面上顯示數據的方式是:
我要顯示的方式是針對數據的適當標簽,例如:屬性ID:236卧室數量:1屬性類型:住宅,依此類推。
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>
如果在單個數組中有固定的數據集,則將其更改為..
then(function(data) {
var text = "";
var res = "";
var i;
for(var i=0; i<data.length; i++){
var prop = data[i];
$('#msgs').append($('<div>').text("Property Id:"+ prop[0]));
$('#msgs').append($('<div>').text("No. of Bedrooms:"+ prop[j]));
});
這可能會幫助您。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.