Iterate array of objects and split as array for every two objects in javascript

Question

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);

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"],  // ["a", "b"]
    [{ 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"],   // ["c", "d"]
    [{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }],
]

Also, at last I have an array

var captions = ["a", "b", "c", "d"]

(based on original array length. Is it possible to add these values instead of name1, nm1 (static content) ? Means a - refers to first item, b- refers to second item

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

Could this be of any help? stackoverflow.com/questions/35656677/… — ConnorTJ
– ConnorTJ, Commented Oct 28, 2021 at 9:06

Terry Lennox · Accepted Answer · 2021-10-28 10:23:23Z

1

You can use Array.reduce() to get the desired result, inserting the two extra arrays every two rows. We also include the captions array, adding two elements each time.

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 captions = ['a','b','c','d'];
let insert = [ { 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(captions.slice(idx - 1, idx + 1));
        acc.push(insert);
    }
    return acc;
}, [])


console.log('Result:', JSON.stringify(result, null, 2));

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

edited Oct 28, 2021 at 10:23

answered Oct 28, 2021 at 9:21

Terry Lennox

30.9k5 gold badges36 silver badges45 bronze badges

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

7 Comments

UI_Dev Over a year ago

Thanks for your hint, but array[0] should have two objects. but above one is different. Can you please refer the output one ?

Terry Lennox Over a year ago

Thanks for checking my answer, I've updated to correct, the output should be as expected now.

UI_Dev Over a year ago

Thanks Terry, it worked. And one more thing, I have an array var captions = ["a", "b", "c", "d"] (based on original array length. Is it possible to add these values instead of name1, nm1 (static content) ? Means a - refers to first item, b- refers to second item

Terry Lennox Over a year ago

Oh sure, could you update the question to include this, along with the expected result? Thank you!

UI_Dev Over a year ago

Updated my question and output to include this one

|

loop · Accepted Answer · 2021-10-28 10:18:09Z

1

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] ].filter(v=>v));
  result.push(...staticContent);
}

console.log(result);

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

edited Oct 28, 2021 at 10:18

answered Oct 28, 2021 at 9:33

loop

1,0238 silver badges17 bronze badges

4 Comments

UI_Dev Over a year ago

Thanks @loop, this one is breaking if we have 5 array of objects (original)

loop Over a year ago

You mean if the original array has an odd number of items? Right. The behavior is undefined in that case. How it should behave?

UI_Dev Over a year ago

it shouldn't show as undefined. just one item in that last array. And one more thing, I have an array var captions = ["a", "b", "c", "d"] (based on original array length. Is it possible to add these values instead of name1, nm1 (static content) ? Means a - refers to first item, b- refers to second item

loop Over a year ago

I added a filter which removes any empty values. I think I will not go further into feature development.

Noor Ul Ain · Accepted Answer · 2021-10-28 11:15:50Z

is that how you want?

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 captions = ['a','b','c','d'];
let arr1 = ["name1", "nm1"]
let arr2 = [{ text: "", border: [false, false, false, false], fillColor: "white" }, { text: "", border: [false, false, false, false], fillColor: "white" }]
let result = []
let tempSubArr = []

original.forEach((value,index)=>{
    
    if(index%2 != 0) {
        result.push(tempSubArr,[captions[index-1],captions[index]],arr2)
        counter = 0
        tempSubArr = []
    }
    tempSubArr.push(value)
})

Collectives™ on Stack Overflow

Iterate array of objects and split as array for every two objects in javascript

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related