如何在循环中实现json数据？ （html和javascript）

Question

我从我的hson文件中获取了一些我在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

我认为你的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 2

尝试使用附加说明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 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() + ... )