用模数循环？

Question

我在JavaScript函数中有一个HTML代码。我希望div“.one-card”在每个div“.row”中重复4次。知道div“.row”也在foreach中重复。我想告诉它（使用模数）因为modulo（4）的结果与零不同，显示此代码。

我测试了这个，但它不起作用。你能帮我吗 ？非常感谢！

更精确：数据来自json文件

$.getJSON('js/issuers.json', function(donnees) {
  let jsonData = "";

    $.each( donnees, function( key, val ) {


    jsonData +=
    "<div class='row'>"
      while (donnees % 4 != 0) {
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+
        "<div class=\"card\">"+
    "<div class=\"card-container-img\">"+
      "<img src=\""+val.logo+"\"+ class=\"card-img-top\" alt=\""+val.name+"\">"+
    "</div>"+ [...]

}

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

Answer 1

我猜你的问题是你想要的是每排四张牌。对不起，如果我对此不以为然。

这是我如何做到这一点：

• 将donnees分成4块
• 将每个拆分块映射到其对应的html
• 将html附加到页面

// this is just faking the getJson call
const $ = {
  getJSON: (_, cb) => cb(Array.from(new Array(55).keys())),
}

// we specify how big we want the chunks here so we can use it later
const chunkSize = 4;

// this is a utility function to get an array of a given size filled with numbers
const getArrayOfSize = size => Array.from(new Array(size).keys())

// this function takes an array and a size of chunk, and returns another function;
// the function it returns takes an index, and returns a chunk of the array of the size
// specfied at the index specified
const getChunkSlicer = (array, size) =>
  i =>
    array.slice(i * size, (i * size) + size)

// this function gives us back a function which can be used to split an array into chunks of the size specified
const groupToSize = size =>
  array =>
    getArrayOfSize(Math.ceil(array.length / size))
      .map(getChunkSlicer(array, chunkSize))

// splitIntoFours is a function which splits an array into chunks of 4 items
const splitToFours = groupToSize(4);

// this is where we convert an item to its html
const getCardHtml = item => `
  <div class="one-card col-lg-3 col-md-6 wow fadeInUp">${item}</div>
`;

// this is where we convert a row into its html
const getRowHtml = rowData => `
  <div class='row'>
    ${rowData.map(getCardHtml).join('')}
  </div>
`;

// now we can put everything together
$.getJSON('js/issuers.json', donnees => {

  // rows is donnees, split into chunks of 4
  const rows = splitToFours(donnees);
  
  // rowsHtml is the html to represent those chunks as rows
  const rowsHtml = rows
    .map(getRowHtml)
    .join('')
  
  // add the final html to the page
  document.getElementById('x').innerHTML = rowsHtml;
})

/* the css is only here to demonstrate the principle */
.row {
  background-color: rgba(20, 20, 30, 0.5);
  margin-bottom: 50px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="x"></div>

Answer 2

我假设donnees是0索引，这意味着你的循环将永远不会启动，因为0 % 4 === 0;。试试while ((donnees + 1) % 4 != 0)。

编辑：

为了能够从x％y获得任何结果，x和y都需要是数字，所以你想要做的就是使用循环的每个元素的索引，所以像while((key+1) % 4 !== 0)这样的东西应该可以做到。

Answer 3

我想回应其中一条评论。很难跟上你想要做的事情，但我已经根据你发布的JSON给了它一个去。

var donnees = { "1": { "validatorID": "1", "address": "0x8b...", "KYBHash": "104c99...", "ID": "1", "country": "fr", }, "2": { "validatorID": "2", "address": "0x8b2...", "KYBHash": "104c992...", "ID": "2", "country": "fr", }}

let jsonData = "";

$.each( donnees, function( key, val ) {
  // key is 1 or 2, val is json like: { "validatorID": "1", "address": "0x8b...", "KYBHash": "104c99...", "ID": "1", "country": "fr", }
  jsonData += "<div class=\"row\">"
  $.each( val, function( newKey, data ) {
  // newKey is name, like address, data is like "0x8b..."

    if (newKey !== 'ID') jsonData += "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\"><p>" +data + "</p></div>"
  })
  jsonData += "</div>"
})
console.log(jsonData)
$(".testjson").html(jsonData);

Answer 4

我的导师找到了解决方案，所以我与你分享。感谢所有花时间回答的人。

$.getJSON('js/issuers.json', function(donnees) {
  let jsonData = "";
  let count = 1;

  // for (i = 1; i <= donnees.length; i++) {
    $.each( donnees, function( key, val ) {
      if (count === 1) {
        jsonData += "<div class='row'>"
      }

    jsonData +=
    "<div class=\"one-card col-lg-3 col-md-6 wow fadeInUp\">"+

[ETC...]

"</div>" 

if (count === 4) {
  jsonData += "</div>"
}

count = (count%4) + 1;



});
   $(".testjson").html(jsonData); 
});