How do I split my items into two groups?

Question

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, title: "Two" },
  { id: 3, title: "Three" },
  { id: 4, title: "Four" },
  { id: 5, title: "Five" },
  { id: 6, title: "Six" },
];

// JS
document.write('<div class="row">');
document.write('<div class="left"><span>LEFT</span><br />');
items.map((a, b) => {
  if (b % 2 == 0) {
    document.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>");

The output that I want to achive is:

<div class="row">
    <div class="left">
        <div class="entry">
            ...content One...
        </div>
        <div class="entry">
            ...content Two...
        </div>
    </div>
    <div class="right">
        <div class="entry">
            ...content Three...
        </div>
        <div class="entry">
            ...content Four...
        </div>
        <div class="entry">
            ...content Five...
        </div>
        <div class="entry">
            ...content Six...
        </div>
    </div>
</div>

But I got unexpected output:

LEFT

RIGHT
One
Two

RIGHT
Three
Four

RIGHT
Five
Six

Please see JS Fiddle

Any help and suggestions are welcome. Thanks.

Don't use `document.write`. It's widely considered bad practice. — connexo, Aug 03 '18 at 06:02
@connexo I won't use that in real development/production, that's for preview purpose — mrale81, Aug 03 '18 at 06:22
@stealththeninja to divide and put list of objects into two or more `div` — mrale81, Aug 03 '18 at 06:23
@mrale81 "two or more divs" How do you want the objects split then? Can you specify the rules for arbitrary number of elements, explaining how to split them into how many groups? For the example given in the question modulus is not suited since you want groups of different size. — Malte Hartwig, Aug 03 '18 at 06:29
@mrale81 modulus would make sense if building collections with no more than n items. I see more than 2 items in the Right collection. Is the expected output correct? — stealththeninja, Aug 03 '18 at 06:30
@stealththeninja please see one of the answers below, I found what I need and perfectly work — mrale81, Aug 03 '18 at 06:39

gavgrif · Answer 1 · 2018-08-03T06:07:22.847

1

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 objects
const 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"}]

edited Aug 03 '18 at 06:07

answered Aug 03 '18 at 06:03

gavgrif

15,194
2
25
27

As far as I understood he wants to or has to use the modulus operator... – Aug 03 '18 at 06:04
As I understood the expected result, the first two items are in Left and the rest are in Right. That wouldn't be a modulus operator. – stealththeninja Aug 03 '18 at 06:06
"I want to split list of arrays with modulus operation ... ". Otherwise he could directly build up 2 objects. – Aug 03 '18 at 06:06
Yup, I see the words. The expected output tells a different story. – stealththeninja Aug 03 '18 at 06:07
1

oops - I missed the modulus operator in teh question - but that said - the modulus operator is not the right tool for this job - so i wont try to refactor my solution. – gavgrif Aug 03 '18 at 06:08
Ok, I think this approach is more closer to my goal. So I must use individual loop in each sides, right? Anyway, thanks for giving me a direction, guys. – mrale81 Aug 03 '18 at 06:15

score 1 · Accepted Answer · answered Aug 03 '18 at 06:20

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 understand
        if (write_div_once) {
            write_div_once = false
            document.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>')

Eduardo Palacio · Answer 3 · 2018-08-03T13:40:21.150

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('<div class="row">');
    document.write('<div class="left">');
    document.write('<div class="entry">${a.title}</div>');
}else if(id == 2){
    document.write('<div class="entry">${a.title}</div></div>');
}else if(id==3){
    document.write('<div class="right">');
    document.write('<div class="entry">${a.title}</div>');
}else if(id ==0){
    document.write('<div class="entry">${a.title}</div></div></div>');
}else{
    document.write('<div class="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.

How do I split my items into two groups?

3 Answers3

Linked