I have a scenario to achieve the below output (attached at last) dynamically by iterating over array.

Original Array:

var original = [{
        image: 'sampleImage1.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage2.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage3.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage4.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    }
    ];
    
   var arr1 = [];
 for(var i = 0; i < original.length; i  = 2) {
        arr1.push(original.slice(i, i   2));
    }
    
    console.log(arr1);

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

I need to convert every two objects as array and in between every two arrays, I need to insert below two arrays (static one which will insert after every two arrays)

["name1", "nm1"],
[{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],

Output

var output = [
    [
        {
            image: 'sampleImage.jpg',
            alignment: 'center',
            width: 200,
            height: 200,
            margin: [0, 20, 0, 20]
        },
        {
            image: 'sampleImage.jpg',
            alignment: 'center',
            width: 200,
            height: 200,
            margin: [0, 20, 0, 20]
        }
    ],
    ["name1", "nm1"],
    [{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],
    [
        {
            image: 'sampleImage.jpg',
            alignment: 'center',
            width: 200,
            height: 200,
            margin: [0, 20, 0, 20]
        },
        {
            image: 'sampleImage.jpg',
            alignment: 'center',
            width: 200,
            height: 200,
            margin: [0, 20, 0, 20]
        }
    ],
    ["name2", "nm2"],
    [{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],
]

I'm stuck how to achieve this logic. Any help would be highly appreciated. Need solution only in javascript.

CodePudding user response：

Would this do? We iterate half the length of the original array and pick two items on each iteration. We also add the static content at the end on each iteration.

var original = [{
        image: 'sampleImage1.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage2.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage3.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    },
    {
        image: 'sampleImage4.jpg',
        alignment: 'center',
        width: 200,
        height: 200,
        margin: [0, 20, 0, 20]
    }
    ];

const staticContent = [
  ["name1", "nm1"],
  [{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],
];

const result = [];

for(let i=0;i<original.length/2;i  ) {
  result.push([ original[i*2], original[i*2 1] ]);
  result.push(...staticContent);
}

console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can use Array.reduce() to get the desired result, inserting the two extra arrays every two rows.

var original = [{ image: 'sampleImage1.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage2.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage3.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] }, { image: 'sampleImage4.jpg', alignment: 'center', width: 200, height: 200, margin: [0, 20, 0, 20] } ];
    
let insert = [ ["name1", "nm1"], [{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }], ]

let result = original.reduce((acc, cur, idx) => { 
    if ((idx % 2 === 0)) {
        acc.push([cur]);
    } else {
        acc[acc.length - 1].push(cur);
        acc.push(...insert);
    }
    return acc;
}, [])


console.log('Result:',result)

.as-console-wrapper { max-height: 100% !important; top: 0; }

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>