如何將 API 回應(50 個產品)迭代到 html 串列中?結果當前自動顯示,沒有樣式。我只需要將結果中的所有 50 個產品分解為單獨的
索引.js
<div class="column right" id="result">
</div>
<script type="text/javascript">
function callAliExpressApi(index) {
let url = '';
if (index == 1) url = "/api/get-products";
else if (index == 2) url = "/api/get-hotproducts";
//else if (index == 3) url = "/api/get-hotproduct-download";
else if (index == 3) return;
else if (index == 4) url = "/api/get-categories";
else if (index == 5) url = "/api/get-featuredpromo-info";
//else if (index == 6) url = "/api/get-featuredpromo-products";
else if (index == 6) return;
//else if (index == 7) url = "/api/smart-match-products";
else if (index == 7) return;
let result = '';
$.get(url, function(data, status){
for (i = 0 ; i < Object.keys(data).length ; i ) {
result = result Object.keys(data)[i] '=' Object.values(data)[i] '<br/>';
}
$("#result").html(result);
});
}
</script>
示例.html
<ul>
<li class="layer-slide gallery-book-slide">
<div>
<span class="gallery-book-list-img">
<img src="{productimage}">
</span>
<div class="layer-region">
<a href="#" target="_blank">
<div class="layer-inner">{productname}</div>
</a>
</div>
<a href="{producturl}" target="_blank" class="gallery-book-product-text" title="">{producttitle}</a>
<div class="gallery-book-author" title=""></div>
<div class=" gallery-book-product-price">
<div>
<i>
<span>¥</span>{productprice} </i>
<span></span>
</div>
</div>
</div>
</li>
</ul>

uj5u.com熱心網友回復:
再會,
為此,您需要使用 javascript 注入 html 代碼。如果您的回應是一個包含 50 個物件的陣列,您將需要遍歷每個物件并將每個物件的內容注入 html。要進行迭代,您將需要使用 map 函式。
[].map(value => {})
請按照本指南了解如何使用 javascript 將代碼注入您的頁面。 更多資訊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS CreateElement Demo</title>
</head>
<body>
<script>
const response = [{name: "jack"}, {name: "slack"}, {name: "wack"}]
response.map(value => {
let div = document.createElement('div');
div.innerHTML = `<p>${value.name}</p>`;
document.body.appendChild(div);
})
</script>
</body>
</html>
希望這有助于指導您朝著正確的方向前進。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/353707.html
