Generate custom object of arrays Javascript

Question

Hi All Sorry if my question is not up to the mark I am new to StackOverflow I am trying to generate a custom object of arrays from an array of objects. I am using map function to loop over the existing array of object

Current Array of object looks like

const serials = [{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},]

And the result should be like this

{
            columns: [
                {qr:"ikhlaq",},
                { qr:"dayim",},
                {qr:"ikhlaq",},
                {qr:"dayim",}
            ]
        },
        {
            columns: [
                {text: " ",},
            ]
        },
        {
            columns: [
                {qr:"ikhlaq",},
                { qr:"dayim",},
                {qr:"ikhlaq",},
                {qr:"dayim",}
            ]
        },
            {
            columns: [
                {text: " ",},
            ]
        },
        {
            columns: [
                {qr:"ikhlaq",},
                {qr:"dayim",},
                {qr:"ikhlaq",},
                {qr:"dayim",}
            ]
        }

This is my current Approach


serials.map((serial,index)=>{
            
            if(index % 4 == 0){
               columns.push ({columns: [{text:serial.serial}]})
            }
             columns.push ({columns : [{qr:serial.serial}]})
        })

My real problem is I am trying to make pdf of QR code but it goes off-screen when I align then horizontally but if I can get an array as in the result I can solve my challenge

Thank You

This is how it looks on the desired array Qr code from result array of objects

[Split array into chunks](https://stackoverflow.com/questions/8495687/split-array-into-chunks) — Andreas, Jul 03 '20 at 10:55
You don't need map if you aren't "mapping" an array to another array (not using the return value). You should be using foreach or a for-of loop — user120242, Jul 03 '20 at 10:58
columns.push should be `(columns[columns.length-1]=columns[columns.length-1]||[]).push...`. You need to append to the last columns object created. Also your presented output is not valid. It should be an array on the outer object, not an object. — user120242, Jul 03 '20 at 11:01
Rule of thumb, use map if you want your result array to have the same number of elements as your starting array. Here you don't. — James, Jul 03 '20 at 11:58

score 0 · Answer 1 · answered Jul 03 '20 at 11:35

Use reduce() or forEach() not map(). Here is a solution using reduce():

const serials = [{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'},{serial:'ikhlaq'},{serial:'dayim'}];

const content = serials.reduce((acc, o, index) => {
  if (index % 4 == 0) {
    index && acc.push({ columns: [ { text: ' ' } ] });
    acc.push({ columns: [ { qr: o.serial } ] });
  } else {
    acc[acc.length-1].columns.push({ qr: o.serial });
  }
  return acc;
}, []);

console.log(JSON.stringify(columns,null,2));

Results:

[
  {
    "columns": [
      { "qr": "ikhlaq" },
      { "qr": "dayim" },
      { "qr": "ikhlaq" },
      { "qr": "dayim" }
    ]
  },
  {
    "columns": [
      { "text": " " }
    ]
  },
  {
    "columns": [
      { "qr": "ikhlaq" },
      { "qr": "dayim" },
      { "qr": "ikhlaq" },
      { "qr": "dayim" }
    ]
  },
  {
    "columns": [
      { "text": " " }
    ]
  },
  {
    "columns": [
      { "qr": "ikhlaq" },
      { "qr": "dayim" },
      { "qr": "ikhlaq" },
      { "qr": "dayim" }
    ]
  },
  {
    "columns": [
      { "text": " " }
    ]
  },
  {
    "columns": [
      { "qr": "ikhlaq" },
      { "qr": "dayim" },
      { "qr": "ikhlaq" },
      { "qr": "dayim" }
    ]
  }
]

Generate custom object of arrays Javascript

1 Answers1