[英]How do I take inputs through HTML and then use those to run a loop with javascript?
[英]How Can I use Javascript to loop through an array and change and add extra HTML that outputs some text with those values?
例如,我正在使用一個返回 JSON 值數組的 API,並且我想將它們輸出到頁面。
這是我正在使用的完整代碼,如果有人想嘗試一下,看看我可以在哪里工作。
我為單擊按鈕時要輸出的值的布局創建了一些 HTML,如下所示:
<p class="txData">
<p id="txHash">Transaction ID: </p><br>
<p id="txTime">Time: </p><br>
<p id="txToken">Token Symbol: </p><br>
<p id="txTo">To: </p><br>
<p id="txFrom">From: </p><br>
<p id="txValue">Amount Transferred: </p><br>
<p>***********************************</p><br>
</p>
然后,我為要附加到的那些元素分配變量:
let txHash = document.querySelector('#txHash');
let txTime = document.querySelector('#txTime');
let txToken = document.querySelector('#txToken');
let txTo = document.querySelector('#txTo');
let txFrom = document.querySelector('#txFrom');
let txValue = document.querySelector('#txValue');
我通過執行以下操作附加從 API 檢索到的值: txHash.insertAdjacentHTML('beforeend', jsonFile.result[0].hash);
txTime.insertAdjacentHTML('beforeend', jsonFile.result[0].timeStamp);
txToken.insertAdjacentText('beforeend', jsonFile.result[0].tokenSymbol)
txTo.insertAdjacentHTML('beforeend', jsonFile.result[0].to);
txFrom.insertAdjacentHTML('beforeend', jsonFile.result[0].from);
txValue.insertAdjacentHTML('beforeend', web3.utils.fromWei(jsonFile.result[0].value, 'ether'));
這可以輸出第一個事務所需的值(索引 [0])。
我如何創建一個循環,該循環基本上在開始時使用模板 HTML,然后將其輸出到數組中的下 5 個元素,以便它成為以相同格式輸出的每個新事務的詳細信息,但無需編碼5次?
我是 HTML 和 Javascript 的新手,非常感謝任何幫助。 謝謝你。
第一條建議,如果您還不知道,如果您打算將靜態 id 用於顯示列表,則應避免在 html 模板中使用靜態 id,因為 id 在單個 html 頁面中必須是唯一的。
第二個,您應該使用框架來幫助您將數據顯示為列表。 如果你知道著名的如 Angular 或 React。 您也可以按照某人的建議使用 jQuery。
這是一個 VueJS 的小例子,它允許您使用 html 模板定義組件。 然后,您可以使用 for 指令在循環中使用它們(請注意,我不是 VueJS 專家,您可能會找到更好的解決方案):
<body>
<div id="app">
<div v-for="json in jsonFile">
<data-display v-bind:json="json"></data-display>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
var DataDisplay = {
props: ['json'],
template: '<div class="txData">\
<p>Transaction ID: {{json.hash}}</p>\
<p id="txTime">Time: {{json.timeStamp}}</p>\
<p id="txToken">Token Symbol: {{json.tokenSymbol}}</p>\
<p id="txTo">To: {{json.to}}</p>\
<p id="txFrom">From: {{json.from}}</p>\
<p id="txValue">Amount Transferred: {{json.value}}</p>\
<p>***********************************</p>\
</div>'
};
var vm = new Vue({
el: "#app",
data: {
jsonFile: [
{
hash: 'hash1',
timeStamp: 'timestamp1',
tokenSymbol: 'token1',
to: 'to1',
from: 'from1',
value: 'value1'
}, {
hash: 'hash2',
timeStamp: 'timestamp2',
tokenSymbol: 'token2',
to: 'to2',
from: 'from2',
value: 'value2'
}
]
},
components: {
'data-display': DataDisplay
}
});
</script>
</body>
用於示例的文檔:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.