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

Question

我从html文件中实现的json文件中获取了一些数据。 数据显示正确。 我的问题是我想将它们放入循环中以复制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

尝试像这里解释的那样使用append。

$.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>"
    ); }
});

也使代码更易读，你可能想尝试这个 ，它可以让你写的整串而不附加和逃避这样的行情\\" 。

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() + ... )