![](/img/trans.png)
[英]Generating Dynamic Cards HTML cards from a Javascript array and Bootstrap in different rows and Columns
[英]Generating dynamic html cards from a javascript array
我想在HTML中顯示一些卡片元素。 我想從javascript數組中獲取card元素的變量。(例如title等。)。 卡元素號還將取決於Javascript數組的大小。 我看過其他問題,例如生成動態表,但是由於我有一個很長的自定義html代碼塊,所以它不起作用。
這是我正在建立的網站。 我已經從帶有HTTP get請求的api端點獲取了變量,但是無法如我所願地顯示。 我看過許多類似的問題,但找不到所需的答案。
這是用於通過HTTP get請求獲取變量的腳本
<script>
const request = new XMLHttpRequest();
request.open('GET', 'api/seminars', true);
request.onload = function() {
// Begin accessing JSON data here
const data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
data.forEach(resultArray => {
document.getElementById('output').innerHTML = resultArray.name;
document.getElementById('description').innerHTML =
resultArray.description;
document.getElementById('date').innerHTML = resultArray.date;
});
} else {
console.log('error');
}
};
request.send();
</script>
HTML代碼:
<div id="accordion">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" data-toggle="collapse" data- target="#collapseOne" aria-expanded="true"
aria-controls="collapseOne">
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<h5 id="name"></h5>
<p id="description"></p>
<p id="description"></p>
...
</div>
</div>
</div>
</div>
而且我從這里繼續不相關的html代碼。
如果我的數組中有3個對象,我想創建3個不同的卡,並顯示名稱,description ..屬性。 但是我的代碼僅創建一張卡並顯示最后一個對象的屬性。
您的代碼永遠不會真正根據您的API調用“創建”元素-它只是通過更新由其ID引用的固定元素的innerHTML來更新(即覆蓋)現有dom元素。
如果我對您的代碼的解釋正確,那么您應該只會在API結果中看到LAST項目。 還有其他一些奇怪的事情,例如重復的ID,我猜是錯別字
要解決此問題,請為API返回的每個項目創建一個新的div.card-body
並將其附加到您的容器中
const apiResult = [{ title: "title1", description: "desc1", output: "out1" }, { title: "title2", description: "desc2", output: "out2" }, { title: "title3", description: "desc3", output: "out3" }]; const container = document.getElementById('accordion'); apiResult.forEach((result, idx) => { // Create card element const card = document.createElement('div'); card.classList = 'card-body'; // Construct card content const content = ` <div class="card"> <div class="card-header" id="heading-${idx}"> <h5 class="mb-0"> <button class="btn btn-link" data-toggle="collapse" data-target="#collapse-${idx}" aria-expanded="true" aria-controls="collapse-${idx}"> </button> </h5> </div> <div id="collapse-${idx}" class="collapse show" aria-labelledby="heading-${idx}" data-parent="#accordion"> <div class="card-body"> <h5>${result.title}</h5> <p>${result.description}</p> <p>${result.output}</p> ... </div> </div> </div> `; // Append newyly created card element to the container container.innerHTML += content; })
.card { padding: 1rem; border: 1px solid black; margin: 1rem; }
<div id="accordion"> </div>
注意:
盡管這可行,但伸縮性不是很好。 那里有一些很棒的模板庫,它們具有更高級的插值功能,如果您必須在許多地方做這樣的事情(並進行維護),可以考慮一下
諸如Vue , React ,Angular wrap模板之類的UI框架具有綁定到數據模型的功能,並為您處理自動更新DOM的工作,從而簡化了此類工作。 值得調查的是,如果您的網頁上有很多動態更新的部分
您每次for loop
重復都將覆蓋描述的innerHTML。
改變這個
document.getElementById('output').innerHTML = resultArray.name; document.getElementById('description').innerHTML = resultArray.description; document.getElementById('date').innerHTML = resultArray.date;
對此
var element = document.createElement('div'); // create new div var name = document.createElement('h4'); name.innerHTML = resultArray.name; element.appendChild(name); var description = document.createElement('p'); description.innerHTML = resultArray.description; element.appendChild(description); var date = document.createElement('span'); date.innerHTML = resultArray.date; element.appendChild(date); document.body.appendChild(element);
假設您已經查詢了API,一種實現方法可能是:
// Supposing you already have queried the API and have your data let data = [ {name: 'name0', description: 'description', date: 'XX/XX/XXXX'}, {name: 'name1', description: 'description', date: 'XX/XX/XXXX'}, {name: 'name2', description: 'description', date: 'XX/XX/XXXX'}, ] data.forEach(res => { let card = document.createElement("div"); let name = document.createTextNode('Name:' + res.name + ', '); card.appendChild(name); let description = document.createTextNode('Description:' + res.description + ', '); card.appendChild(description); let date = document.createTextNode('date:' + res.date); card.appendChild(date); let container = document.querySelector("#container"); container.appendChild(card); });
<!-- At one point where you want to generate the cards you put this container --> <div id="container"></div>
您的列表無法正常運行,因為您總是更新相同的元素,而不是添加新的元素:)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.