CODEWITHSUNDEEP
javascripthtmlmodulo
Carine
Carine

Reputation: 35

Loop with modulo?

I have a HTML code in a JavaScript function. I want the div ".one-card" to repeat itself 4 times in each div ".row". Knowing that the div ".row" is also repeated in a foreach. I would like to tell it (using a modulo) as the result of modulo (4) is different from zero, display this code.

I tested this but it does not work. Can you help me please ? Thank you so much!

More precision : the data comes from a json file

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

Upvotes: 2

Views: 275

Answers (4)

Carine
Carine

Reputation: 35

My tutor has found the solution, so I share it with you. Thank you to everyone who took the time to answer.

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

Upvotes: 0

OliverRadini
OliverRadini

Reputation: 6467

I've made a guess from your question that what you want is to have four cards per row. Sorry if I'm off the mark with that.

Here's how I'd do that:

  • Split donnees into chunks of 4
  • Map each split chunk to its corresponding html
  • Append the html to the page

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

Upvotes: 1

dbramwell
dbramwell

Reputation: 1326

I'd like to echo one of the comments. It's quite hard to follow what you are trying to do, but i've given it a go based on the JSON you posted.

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

Upvotes: 0

amazonic
amazonic

Reputation: 356

I'm assuming donnees is 0-indexed which means that your loop will never start, since 0 % 4 === 0;. Try while ((donnees + 1) % 4 != 0).

EDIT:

To be able to get any result from x % y, x and y both need to be numbers, so what you want to do is probably use the index of every element being looped over, so something like while((key+1) % 4 !== 0) should do the trick.

Upvotes: 0

Related Questions