How can you get a multiple output in json in just one loop?

Question

I did fetch from the URL and I got the data from forEach my problem is there is 2 div inside innerHTML with col-6 so it will be 2 column in 1 row so it will look like this -> sample image but i wanted to get the next line of the array on the second div is that possible so it will have 2 different data

 fetch(URL)
.then(data=>data.json())
.then(data=>{
 data.forEach(datas => {
document.querySelector('.more-from').innerHTML += `


 
  
  
  ${datas.post_title} 
  
 

  
  
  
  ${datas.post_title} 
  
 

`;

ITS ONLY GETTING THE FIRST ID WHICH IS 10893 FOR BOTH DIV.

user_1372195 · Answer

Just use a regular for with index:

for(let i = 0; i < data.length - 1; i = i + 2) {
    const div1Data = data[i];
    const div2Data = data[i+1]
    document.querySelector('.more-from').innerHTML += `...`
}

user_2224937 · Answer

I would use a normal for loop as @Onheiron suggests, only I would use a modulo check to get less repetitive code.

e.g.

for(let i = 0; i < data.length - 1; i = i++) {

    if(i % 2 === 0)
        document.querySelector('.more-from').innerHTML += ``;
   
    document.querySelector('.more-from').innerHTML += ``

    if(i % 2 === 0)
        document.querySelector('.more-from').innerHTML += ``;
}

if you'd set the value to check the modulo against to a variable you could also easily change it to get 3 columns.

How can you get a multiple output in json in just one loop?

2 Answers