How Do I Split My Items Into Two Groups?

I want to split an array of items into two items in left side and four in the right side. My arrays are: // arrays of objects const items = [ { id: 1, title: 'One' }, { id: 2,

Solution 1:

I think its a simple math problem. You forgot that 0/2 is also 0. :)

const lists = [
    {
        "id": 1,
        "title": "One"
    }, {
        "id": 2,
        "title": "Two"
    }, {
        "id": 3,
        "title": "Three"
    }, {
        "id": 4,
        "title": "Four"
    }, {
        "id": 5,
        "title": "Five"
    }, {
        "id": 6,
        "title": "Six"
    }
];

document.write('<div class="row">')
document.write('<div class="left"><span>LEFT</span><br />')

// just to make sure right div write only once
write_div_once = true;

lists.map((a,b) => {
    if((b+1)%3 == 0) { // here is the magic line. ;) Hope you will understandif (write_div_once) {
            write_div_once = falsedocument.write('</div><br />')
            document.write(`<div class="right"><span>RIGHT</span><br />`)
        }
        document.write(`<span>${a.title}</span><br/>`)
    } else{
        document.write(`<span>${a.title}</span><br/>`)
    }
});
document.write('</div>')
document.write('</div>')

Solution 2:

Use .slice() to create two individual arrays that can be iterated over to create the left and right chunks. I agree with the comment to not use document.write.

Also - if the number of items in each group is vriable - you could write a function to chunk the initial array into user defined chunks. Lodash has chunking methods - but for something so simple - easier to just use slice().

// arrays of objectsconst items = [
    {"id": 1, "title": "One"},
    {"id": 2, "title": "Two"},
    {"id": 3, "title": "Three"},
    {"id": 4, "title": "Four"},
    {"id": 5, "title": "Five"},
    {"id": 6, "title": "Six"}
];

const leftItems = items.slice(0,2);

const rightItems = items.slice(2); 


console.log(leftItems); // gives [{"id": 1,"title": "One"}, {"id": 2, "title": "Two"}]

console.log(rightItems); // gives [{"id": 3,"title": "Three"},{ "id": 4,"title": "Four"},{"id": 5,"title": "Five"},{"id": 6,"title": "Six"}]

Solution 3:

Your logic is a little bit incomplete, first is better you use forEach in this case, and also you may want to user module 6 since the logic of separating elements is based in 6 elements. Here is an example

items.forEach((item)=>{
var id = Number(item.id);
id = id%6;
if(id == 1){
    document.write('<divclass="row">');
    document.write('<divclass="left">');
    document.write('<divclass="entry">${a.title}</div>');
}else if(id == 2){
    document.write('<divclass="entry">${a.title}</div></div>');
}else if(id==3){
    document.write('<divclass="right">');
    document.write('<divclass="entry">${a.title}</div>');
}else if(id ==0){
    document.write('<divclass="entry">${a.title}</div></div></div>');
}else{
    document.write('<divclass="entry">${a.title}</div>');
}

Disclaimer: You started your array in id 1, it is more common to start it on 0, this logic is supposed to work only when you start your array in 1 and it will work for as many elements as you want.