Fixed size 2d array of objects

Question

My Objective is to create a fixed column array object of size 4 columns so that I can form a 2d array in the following format which I can use to print to a pdf later. The solution is working fine. But need help in figuring out if there is a better way to implement this.

let input = [{
 id:123,
 quantity: 4,
 value: "xxxx"
},
{
 id:234,
 quantity: 11,
 value: "xxxx"
},
{
 id:345,
 quantity: 1,
 value: "xxxx"
}]
output = [
 [ objHeader, objValue, objValue, objValue ],
 [ objValue, null, null, null ],
 [ objHeader1, objValue1, objValue1, objValue1 ],
 [ objValue1, objValue1, objValue1, objValue1 ],
 [ objValue1, objValue1, objValue1, objValue1 ],
 [ objHeader2, objValue2, null, null ]
]
where objHeader = {
 id:123,
 header:true,
 quantity: 4,
 value: xxxx
}
objValue = {
 id:123,
 header:false,
 quantity: 4,
 value: xxxx
}

objValue is basically input[0].id repeated by the factor present in quantity

objValue1 is input[1].id repeated by the factor present in quantity and so on

Code that is working now

let input = [
 {
 id: 123,
 quantity: 4,
 value: "x1xxx"
 },
 {
 id: 234,
 quantity: 11,
 value: "x2xxx"
 },
 {
 id: 345,
 quantity: 1,
 value: "x3xxx"
 }
];
class RowRecord {
 constructor(rowsize = 4) {
 this.items = Array(rowsize).fill(null);
 this.rowSize = rowsize;
 }
 push(item) {
 const currentSize = this.size();
 // console.log(currentSize);
 if (currentSize < this.rowSize) {
 // replace 1 items with null based on index
 this.items.splice(currentSize, 1, item);
 }
 }
 get() {
 return this.items;
 }
 size() {
 return this.items.filter(item => item !== null).length;
 }
}
function getRecords() {
 const records = [];
 let rows = new RowRecord(); // fill default
 // create records
 for (let i = 0; i < input.length; i++) {
 // check for pending rows
 if (i !== 0 && rows.size() > 0) {
 records.push(rows);
 }
 // initiate new row
 rows = new RowRecord();
 const item = input[i];
 const quantity = parseInt(item.quantity, 10);
 const value = item.value;
 // +1 for printing the label for each product
 for (let j = 0; j <= quantity; j++) {
 if (j === 0) {
 // title label
 rows.push({
 id: item.id,
 header: true,
 quantity,
 value
 });
 } else {
 if (rows.size() === 4) {
 records.push(rows);
 rows = new RowRecord();
 }
 rows.push({
 id: item.id,
 header: false,
 quantity,
 value
 });
 }
 }
 }
 // push any pending rows
 records.push(rows);
 return records;
}
console.log(getRecords());

Answer 1

You can also use Array.prototype.reduce to generate the fixed size 2d array.

const input = [{
 id: 123, quantity: 4, value: "x1xxx"
}, {
 id: 234, quantity: 11, value: "x2xxx"
}, {
 id: 345, quantity: 1, value: "x3xxx"
}];
function getNewRecords(rowSize = 4) {
 return input.reduce((records, current) => {
 let items = [];
 Array.from({
 length: current.quantity + 1 // +1 for header column
 }).forEach((_, index) => {
 const record = {
 header: index === 0,
 id: current.id,
 quantity: current.quantity,
 value: current.value
 }
 if (items.length === rowSize) {
 records.push({ items, rowSize });
 items = [];
 }
 items.push(record);
 });
 if (items.length < rowSize) {
 items.push(...Array(rowSize - items.length).fill(null));
 }
 records.push({ items, rowSize });
 return records;
 }, []);
}
console.log(getNewRecords());

Answer 2

Separating your code out into functions could help readability. I tried writing the functions to each handle a single requirement of your data. Is rowSize really necessary, given that you have access to row.length?

function makeOutputHeader(input_obj) {
 return {...input_obj,header:true}
}
function* makeOutputValues(input_obj) {
 for (let i=0;i<input_obj.quantity;++i)
 yield {...input_obj,header:false}
}
function makeCells(input_obj) {
 return [
 makeOutputHeader(input_obj),
 ...makeOutputValues(input_obj)
 ];
}
function range(count) {
 return Array.from({length:count}).map((_,i)=>i);
}
function makeGrid(cells,width) {
 const height = Math.ceil(cells.length/width);
 const rows = range(height).map(
 row=>range(width).map(
 col=>cells[row*width+col] || null
 )
 )
 return rows
}
function rowsForInputObj(header,width) {
 const cells = makeCells(header);
 return makeGrid(cells,width);
}
function getRecords(input,width) {
 const rows_for_headers = input.map(
 inputObj=>rowsForInputObj(inputObj,width)
 );
 const all_rows = rows_for_headers.reduce((a,b)=>a.concat(b),[]);
 return all_rows;
}
console.log(getRecords(input,4));