[英]Dynamic bootstrap cards with javascript
I have here a json file and this content should get rendered inside of bootstrap cards.我这里有一个 json 文件,该内容应该在引导卡内呈现。
[{
"scripts": {
"web3py": [
{
"thumbnail": "images/thumbnails/sendetherweb3py.png",
"scriptName": "send Native",
"description": "send native with web3py",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
},
{
"thumbnail": "images/thumbnails/sendtokenweb3py.png",
"scriptName": "send token",
"description": "send erc20 token with web3py",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
},
{
"thumbnail": "images/thumbnails/swapnativeweb3py.png",
"scriptName": "swap native token dex",
"description": "swap eth for erc20 token",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
},
{
"thumbnail": "images/thumbnails/swaptokenweb3py.png",
"scriptName": "swap erc20 token on dex",
"description": "swap erc20 token with erc20 token",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
}
],
"web3js": [
{
"thumbnail": "images/thumbnails/swaptokenethers.png",
"scriptName": "swap token on dex",
"description": "swap erc20 token with token on a dex",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
},
{
"thumbnail": "images/thumbnails/swapnativeethers.png",
"scriptName": "swap native",
"description": "swap native for token on dex",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
},
{
"thumbnail": "images/thumbnails/sendtokenethers.png",
"scriptName": "send ERC20 token",
"description": "send erc20 token with ethers",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
},
{
"thumbnail": "images/thumbnails/sendnativeethers.png",
"scriptName": "send native",
"description": "send Native ETH with ethers",
"link": "https://jsonformatter.org/img/tom-cruise.jpg"
}
]
}
}]
Inside scripts I have 2 categories, web3py and web3js with 4 items in it.在脚本中,我有 2 个类别,web3py 和 web3js,其中包含 4 个项目。 Now i want to render web3py inside a row that than contains 4 cards and another row web3js that contains also 4 cards.
现在我想在包含 4 张卡片的一行中渲染 web3py,另一行包含 4 张卡片的 web3js。
How can I render bootstrap cards in Javscript based on the content from my json file?如何根据我的 json 文件中的内容在 Javscript 中呈现引导卡?
I want to do this dynamically so in case i add more items to web3py or web3js, i want the cards to be created dynamically.我想动态地执行此操作,因此如果我向 web3py 或 web3js 添加更多项目,我希望动态创建卡片。
So what would be the best way to create those 4 cards inside a row using javascript?那么使用 javascript 在一行内创建这 4 张卡的最佳方法是什么?
Card looks like this卡片长这样
<div class="card" style="width: 18rem;">
<img src=${thumbnail} class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${scriptName}</h5>
<p class="card-text">${description}</p>
<a href=${link} class="btn btn-primary">Go somewhere</a>
</div>
</div>
This here is my Javascript file这是我的 Javascript 文件
async function getScript(){
const scripts = await fetch('./scripts.json')
const response = await scripts.json()
//console.log(response[0])
const scripta = response[0]['scripts']['web3py']
const image = response[0]['scripts']['web3py'][0]['thumbnail']
const title = response[0]['scripts']['web3py'][0]['scriptName']
const description = response[0]['scripts']['web3py'][0]['description']
console.log(title)
let content = '';
scripta.forEach(p => {
content += `
<div id="keyBoard" class="col-md-4 mt-2">
<div class="card" style="width: 18rem;">
<img src="${image}" class="card-img-top img-fluid" alt="keyboard">
<div class="card-body">
<h5 class="card-title" id="itemName">${title}</h5>
<p class="card-text" id="itemDesc">${description}</p>
<p class="card-text"></p>
<a href="#" class="btn btn-primary" id="addCart">Add to cart</a>
</div>
</div>
</div>
`
});
document.querySelector("#shop").innerHTML = content;
}
getScript()
the problem is that this function prints out the 1st item 4 times in 1 row instead of the 1 item each in 1 row问题是这个 function 在 1 行中打印出第一项 4 次,而不是在 1 行中的每一项
You can loop over the JSON data using a nested loop and then use an empty variable to build the HTML string.您可以使用嵌套循环遍历 JSON 数据,然后使用空变量构建 HTML 字符串。 Then insert that HTML using insertAdjacentHTML .
然后使用insertAdjacentHTML 插入 HTML 。 Additional comments within the code breaking down what each line is doing.
代码中的附加注释分解了每一行的作用。
const main = document.getElementById('main') // an empty variable to hold the card as it is built within a for loop const jsonObj = [{ "scripts": { "web3py": [{ "thumbnail": "images/thumbnails/sendetherweb3py.png", "scriptName": "send Native", "description": "send native with web3py", "link": "https://jsonformatter.org/img/tom-cruise.jpg" }, { "thumbnail": "images/thumbnails/sendtokenweb3py.png", "scriptName": "send token", "description": "send erc20 token with web3py", "link": "https://jsonformatter.org/img/tom-cruise.jpg" }, { "thumbnail": "images/thumbnails/swapnativeweb3py.png", "scriptName": "swap native token dex", "description": "swap eth for erc20 token", "link": "https://jsonformatter.org/img/tom-cruise.jpg" }, { "thumbnail": "images/thumbnails/swaptokenweb3py.png", "scriptName": "swap erc20 token on dex", "description": "swap erc20 token with erc20 token", "link": "https://jsonformatter.org/img/tom-cruise.jpg" } ], "web3js": [{ "thumbnail": "images/thumbnails/swaptokenethers.png", "scriptName": "swap token on dex", "description": "swap erc20 token with token on a dex", "link": "https://jsonformatter.org/img/tom-cruise.jpg" }, { "thumbnail": "images/thumbnails/swapnativeethers.png", "scriptName": "swap native", "description": "swap native for token on dex", "link": "https://jsonformatter.org/img/tom-cruise.jpg" }, { "thumbnail": "images/thumbnails/sendtokenethers.png", "scriptName": "send ERC20 token", "description": "send erc20 token with ethers", "link": "https://jsonformatter.org/img/tom-cruise.jpg" }, { "thumbnail": "images/thumbnails/sendnativeethers.png", "scriptName": "send native", "description": "send Native ETH with ethers", "link": "https://jsonformatter.org/img/tom-cruise.jpg" } ] } }] // define the object const scripts = jsonObj[0]['scripts'] // define an output variable to hold HTML let output = '' // loop over the two nested arrays for (let objs in scripts) { // set first row output += '<div class="d-flex">' // get data from first array of objects scripts[objs].forEach(item => { output += ` <div class="card ${objs}" style="width: 18rem;"> <img src=${item["thumbnail"]} class="card-img-top col-sm flex-row" alt="..."> <div class="card-body col-sm"> <h5 class="card-title">${item["scriptName"]}</h5> <p class="card-text">${item["description"]}</p> <a href=${item["link"]} class="btn btn-primary">Go somewhere</a> </div> </div>` }) // close the row output += '</div>' } // insert the HTML using.insertAdjacentHTML main.insertAdjacentHTML('afterbegin', output)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script> <div id="main"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.