如何在循环中实现json数据？ （HTML和JavaScript）

Question

我从json文件中获取了一些数据，这些数据是我在html中实现的。数据显示正确。我的问题是我想将它们放入循环中以复制html，并且数据json可以适应。

让我解释更多。我有几张代表不同学校的卡片。每个内部都有相同的数据，但是必须根据学校的情况进行调整。

使用我当前的代码，就形成了循环，但是每张卡都覆盖了前一张。因此，仅显示第八个。

如果有人可以帮助我，那就太好了。理想情况下，我不想使用ajax。非常感谢你！

提取我的json文件：

{
    "1": {
        "validatorID": "1",
        "address": "0x8b...",
        "name": "Name test",
        "intentDeclaration": "Lorem ipsum",
        "KYBHash": "104c99...",
        "ID": "1",
        "logo": "https://gallery.mailchimp.com/06805e35e34db6974972f20f6/files/ed545cd7-82e6-49a8-bf0c-73f8220e4478/chain_accelerator.svg",
        "country": "fr",
        "continent": "eu"
    },
     "2": {
        "validatorID": "2",
        "address": "0x8b2...",
        "name": "Name test2",
        "intentDeclaration": "Lorem ipsum2",
        "KYBHash": "104c992...",
        "ID": "2",
        "logo": "https://gallery.mailchimp.com/06805e35e34db6974972f20f6/files/ed545cd7-82e6-49a8-bf0c-73f8220e4478/chain_accelerator.svg",
        "country": "fr",
        "continent": "eu"
    }

我的Js文件的提取

$.getJSON('js/issuers.json', function(donnees) {
  for (i = 1; i <= 9; i++) {

  $(".testjson").html(
    "<div class='row'>"+
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+
        "<div class=\"card\">"+
    "<div class=\"card-container-img\">"+
      "<img src=\""+donnees[i].logo+"\"+ class=\"card-img-top\" alt=\""+donnees[i].name+"\">"+
    "</div>"+
       "<div class=\"card-body\">"+
    "<h2 class=\"issuer-name\">"+donnees[i].name+"</h2>"+
       "<p class=\"issuer-important\"><span class=\"country\">"+donnees[i].country+"</span> <span class=\"continent\">"+donnees[i].continent+"</span></p>"+
      "<p class=\"issuer-number\">"+donnees[i].address+"</p>"+
    "<p class=\"declaration\">"+
      "<i class=\"icon-quote-start quote\"></i>"+
       donnees[i].intentDeclaration+
        "<i class=\"icon-quote quote\"></i>"+
    "</p>"+

                       [...]
  "</div>"+
"</div>"+
"</div>"
    ); }
});

提取我的HTML文件：

<div class="testjson"></div>

Answer 1

尝试使用附加的here这样的附加内容。

$.getJSON('js/issuers.json', function(donnees) {
  for (i = 1; i <= 9; i++) {

  $(".testjson").append(
    "<div class='row'>"+
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+
        "<div class=\"card\">"+
    "<div class=\"card-container-img\">"+
      "<img src=\""+donnees[i].logo+"\"+ class=\"card-img-top\" alt=\""+donnees[i].name+"\">"+
    "</div>"+
       "<div class=\"card-body\">"+
    "<h2 class=\"issuer-name\">"+donnees[i].name+"</h2>"+
       "<p class=\"issuer-important\"><span class=\"country\">"+donnees[i].country+"</span> <span class=\"continent\">"+donnees[i].continent+"</span></p>"+
      "<p class=\"issuer-number\">"+donnees[i].address+"</p>"+
    "<p class=\"declaration\">"+
      "<i class=\"icon-quote-start quote\"></i>"+
       donnees[i].intentDeclaration+
        "<i class=\"icon-quote quote\"></i>"+
    "</p>"+

                       [...]
  "</div>"+
"</div>"+
"</div>"
    ); }
});

另外，为了使代码更具可读性，您可能需要尝试this，该代码使您可以编写整个字符串而无需附加和转义引号\"。

Answer 2

我认为您的json数据被一一覆盖。 这意味着您要写入第一个值，第二个值...和最后一个值。 因此，您必须加入所有值。

$.getJSON('js/issuers.json', function(donnees) {
  let jsonData = "";
  for (i = 1; i <= 9; i++) {

    jsonData +=
    "<div class='row'>"+
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+
        "<div class=\"card\">"+
    "<div class=\"card-container-img\">"+
      "<img src=\""+donnees[i].logo+"\"+ class=\"card-img-top\" alt=\""+donnees[i].name+"\">"+
    "</div>"+
       "<div class=\"card-body\">"+
    "<h2 class=\"issuer-name\">"+donnees[i].name+"</h2>"+
       "<p class=\"issuer-important\"><span class=\"country\">"+donnees[i].country+"</span> <span class=\"continent\">"+donnees[i].continent+"</span></p>"+
      "<p class=\"issuer-number\">"+donnees[i].address+"</p>"+
    "<p class=\"declaration\">"+
      "<i class=\"icon-quote-start quote\"></i>"+
       donnees[i].intentDeclaration+
        "<i class=\"icon-quote quote\"></i>"+
    "</p>"+

                       [...]
  "</div>"+
"</div>"+
"</div>";
    }
   $(".testjson").html(jsonData);
});

Answer 3

您可以使用jquery（$ .each）遍历json（对象）。您可以尝试这样的事情：

HTML

<div class="testjson"></div>

Js：

$.getJSON('js/issuers.json', function(response) {

    $.each(response, funtion(key, value){
       $(".testjson").append(
       "<div class='row'>"+
        "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+
        "<div class=\"card\">"+
           "<div class=\"card-container-img\">"+
          "<img src=\""+ value.logo+"\"+ class=\"card-img-top\" alt=\""+value.name+"\">"+
           "</div>"+
         "<div class=\"card-body\">"+
        "<h2 class=\"issuer-name\">"+value.name+"</h2>"+
          "<p class=\"issuer-important\"><span class=\"country\">"+value.country+" 
         </span> <span class=\"continent\">"+value.continent+"</span></p>"+
         "<p class=\"issuer-number\">"+value.address+"</p>"+
        "<p class=\"declaration\">"+
         "<i class=\"icon-quote-start quote\"></i>"+
       value.intentDeclaration+
        "<i class=\"icon-quote quote\"></i>"+
    "</p>"+

                       [...]
     "</div>"+
   "</div>"+
   "</div>");
  });
 });

Answer 4

在循环的每次迭代中，您都用新数据覆盖.testjson html，您需要做的就是将其附加到它上面，就像这样： $('.testjson').html($('.testjson).html() + ... )