Break an array to array of arrays based on the some of item's property

Question

I am using lodash, I wanted to group an array of objects according to the sum of it's property width.

I have this data set

[
    {id: 0, width: 2},
    {id: 1, width: 2},
    {id: 2, width: 4},
    {id: 3, width: 1},
    {id: 4, width: 3}
]

Actually this is to build rows and columns, and the maximum width of a row is 4

The expected output would be:

[
    [{id: 0, width: 2}, {id: 1, width: 2}],
    [{id: 2, width: 4}],
    [{id: 3, width: 1}, {id: 4, width: 3}]
]

How do I go about this?

Was thinking like:

const maxWidth = 4
let currentRowWidth = 0

let newData = _.map(source, data => {
  let array = []
  if (currentRowWidth === 0) {
    currentRowWidth += data.width
    ...
    ...
  }
})

Edge case:

if for example the the current row width is 3, and the next column has a width of 2. . . then it should move to next row, since if we add 3 and 2... it will exceed 4.

e.g.

[
    [{id: 0, width: 1}, {id: 1, width: 2}],
    [{id: 2, width: 2} ...],
]

How about cases wherein the total width in the sequence does not equal to 4? — ryeballar
– ryeballar, Commented Jul 3, 2016 at 6:06
if it is the last row, then it's fine if it's the last row's column's sum width does not equate to 4. — Joey Hipolito
– Joey Hipolito, Commented Jul 3, 2016 at 6:07
What will happen if it's in the middle or in the first parts of the array? — ryeballar
– ryeballar, Commented Jul 3, 2016 at 6:10
actually, it's fine as well, like for example, the 3rd item's width will exceed 4... it should be on the next row... — Joey Hipolito
– Joey Hipolito, Commented Jul 3, 2016 at 6:11

Mouad Debbar · Accepted Answer · 2016-07-03 08:02:04Z

2

function split(arr, max) {
  max = max || 4;
  var sum = 0;
  return arr.reduce(function(rows, item) {
    // If the next column can't fit in the current row, create a new row.
    if (item.width + sum > max) {
      sum = 0;
      rows.push([]);
    }
    sum += item.width;
    rows[rows.length - 1].push(item);
    return rows;
  }, [[]]);
}

answered Jul 3, 2016 at 8:02

Mouad Debbar

3,2462 gold badges22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle Baker · Accepted Answer · 2016-07-03 17:59:54Z

1

Looks like a CSS row/column system. :) Here's an attempt off the top of my head. Hasn't been tested, should be pretty close though.

function makeRows(flatArray) {
  var output = [[]];
  var currentRowWidth = 0;
  for (var i = 0; i < flatArray.length; i++) {
    if (currentRowWidth + flatArray[i].width < 4) {
      // it fits.
      currentRowWidth += flatArray[i].width;
      output[output.length - 1].push(flatArray[i];
    }
    else if (flatArray[i].width <= 4) {
      // needs a new row
      output.push([]);
      output[output.length-1].push(flatArray[i];
      currentRowWidth = flatArray[i].width
    }
    else {
      // handle your error for a row that's too wide to fit.
    }

  }
  return output;
}

If you want to do it functionally, map() won't really work, because it only knows about one element at a time. You need reduce, which keeps track of its output and builds it up piece by piece.

source.reduce((memo, item) => {
  if (memo.currentRowWidth + item.width <= 4) {
    memo.currentRowWidth += item.width;
    memo.output[memo.output.length -1].push(item);
  }
  else if (item.width < 4) {
    memo.push([]);
    memo.output[memo.output.length -1].push(item);
    memo.currentRowWidth += item.width;
  }
  else {
    // item.width too big, do what you want
  }
}, { currentRowWidth: 0, output: [[]] })

Again, untested, off the top of my head, but something like that.

edited Jul 3, 2016 at 17:59

answered Jul 3, 2016 at 6:17

Kyle Baker

3,7202 gold badges28 silver badges36 bronze badges

2 Comments

Mikhail Shabrikov Over a year ago

I have two remarks: 1. source.reduce(memo, item => { ... here, memo - it's first argument for callback function, therefore, correct to write: source.reduce((memo, item) => {... 2. memo.output[memo.length -1].push(item); here, memo - it's object { currentRowWidth: ..., output: ...}, and his length always equal 2. Check memo.output.length

Kyle Baker Over a year ago

@MikhailLevsha, yes, insufficient proofreading on my part. I wrote it up quickly late at night. I've fixed those mistakes.

Morteza Tourani · Accepted Answer · 2016-07-04 20:16:27Z

1

I think this could be the answer:

var data = [{ id: 0, width: 2 }, { id: 1, width: 2 }, { id: 1, width: 2 }, { id: 2, width: 4 }, { id: 3, width: 1 }, { id: 4, width: 3 }],
    max = 4,
    group = [],
    grouped = [group,],
    width = 0;

data.forEach(d => {
  if (width + d.width > max) {
    width = 0;
    grouped.push(group = []);
  }
  width += d.width;
  group.push(d);
});

console.log(grouped)

answered Jul 4, 2016 at 20:16

Morteza Tourani

3,5665 gold badges44 silver badges48 bronze badges

Comments

Nina Scholz · Accepted Answer · 2016-07-03 09:09:25Z

0

A proposal which uses an array for the count and it uses all spaces, not only the last slot.

var data = [{ id: 0, width: 2 }, { id: 1, width: 2 }, { id: 2, width: 4 }, { id: 3, width: 1 }, { id: 4, width: 3 }],
    max = 4,
    grouped = [];

data.forEach((count => a => {
    var index = count.findIndex(b => b + a.width <= max);
    if (index === -1) {
        index = grouped.push([]) - 1;
        count[index] = 0;
    }
    grouped[index].push(a);
    count[index] += a.width;
})([]));
console.log(grouped);

edited Jul 3, 2016 at 9:09

answered Jul 3, 2016 at 7:44

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

6 Comments

Joey Hipolito Over a year ago

The answer is great, but one question, does this approach will keep the references of each object, as for example, the data changes, I wanted the data to be immutable, somehow.

Nina Scholz Over a year ago

my answer keeps the reference. if you need just a copy of it, then change grouped[index].push(a); to grouped[index].push(JSON.parse(JSON.stringify(a))); or copy each property to an independent object.

Morteza Tourani Over a year ago

I think you should change you answer to match the terms which seems to be added later.

Nina Scholz Over a year ago

@mortezaT, i actually do not know, what the op wants - keeping a reference to the given objects or use independent clones.

Morteza Tourani Over a year ago

Last piece of question says if not matched the width just move to next group. But you search for next matched therefor order will change. Check mine.

|

Collectives™ on Stack Overflow

Break an array to array of arrays based on the some of item's property

4 Answers 4

Comments

2 Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest