我这里有一个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"
            }
        ]
    }
}]

在脚本里面我有两个类别，web3py和web3js，其中有4个项目。现在我想在一行中渲染web3py，其中包含4张卡片，另一行中渲染web3js，其中也包含4张卡片。
如何基于json文件中的内容在Javascript中呈现引导卡？
我想动态地这样做，所以如果我添加更多的项目到web3py或web3js，我希望卡是动态创建的。
那么，使用javascript在一行中创建这4张卡片的最佳方法是什么呢？
卡片看起来像这样

<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>

这是我的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()

问题是该函数在一行中打印出第一项4次，而不是在一行中每次打印出1项