Map an array of key/value objects of bigger length into other array

user_12037397 0
Viewed 292

Hello developers Im trying to map the key value i have in an array of objects , into other array of minor length, but due to the task i have been committed is necessary to do it in this way.

Lets say i Have an array of objects of length 2 with this structure:

const array1=[
  { status: "ok", actual: true }, 
  { status: "not ok" }, 
]

And the array i pretend to add to this one has a bigger length and look like this:

const iconsStepper = [
        { icon: 'x' },
        { icon: 'xx' },
        { icon: 'xxx' }
];

Then the expected result , having in mind i need to couple the second array into the first would be :

[
  { status: "ok", actual: true ,icon:x}, 
  { status: "not ok",icon:xx }, 
  {icon:xxx }, 
]

I got a function mapping the second array into the first:

array1.map((object, index) => ({
      ...object,
      icon: iconsStepper[index].icon,
    }));

and following this logic the result thrown is :

[
  { status: "ok", actual: true ,icon:x}, 
  { status: "not ok",icon:xx }, 
]

Being omitted the last object of the iconSteeper array cause the length of the array it supposed should be mapped to is minor

How can i fix this problem without precisely invert the array to map. Thanks

angular dictionary arrays javascript
5 Answers

You could mege the arrays by reducing them and get all property of the same indices at the same place.

const
    array1 = [{ status: "ok", actual: true }, { status: "not ok" }],
    array2 = [{ icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' }],
    result = [array1, array2].reduce((r, a) => {
        for (let i = 0; i < a.length; i++) Object.assign(r[i] ??= {}, a[i]);
        return r;
    }, []);

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

A slightly different approach with mapping the arrays.

const
    array1 = [{ status: "ok", actual: true }, { status: "not ok" }],
    array2 = [{ icon: 'x' }, { icon: 'xx' }, { icon: 'xxx' }],
    result = [array1, array2].reduce((r, a) => Object.assign(
        r,
        a.map((o, i) => ({...r[i], ...o }))
   ), []);

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

user_14476750 

const array1 = [
  { status: "ok", actual: true },
  { status: "not ok" },
];

const iconsStepper = [
  { icon: 'x' },
  { icon: 'xx' },
  { icon: 'xxx' },
];

const output = array1.length > iconsStepper.length ? array1.map((object, index) => {
  const returnObj = {
    ...object,
  }
  if (iconsStepper[index]) {
    returnObj['icon'] = iconsStepper[index].icon
  }
  return returnObj;
}) : iconsStepper.map((object, index) => ({
  ...array1[index],
  icon: iconsStepper[index].icon,
}));

console.log(output)

user_60993270

You can combine Array#reduce() and Array#map() as follows:

const arr1 = [{status: "ok", actual: true },{ status:"not ok" }];

const arr2 = [{ icon: 'x' },{ icon: 'xx' },{ icon: 'xxx' }];

const result = [arr1, arr2].reduce(
    (acc,cur) => !acc.length ? cur : cur.map((e,i) => ({...acc[i],...e})), []
);

console.log( result );

user_35589310

You can use variables as if they were pointers

const array1=[
  { status: "ok", actual: true }, 
  { status: "not ok" }
]


const iconsStepper = [
        { icon: 'x' },
        { icon: 'xx' },
        { icon: 'xxx' }
];

const mergeArrays = (one,two) => {
  const bigger = (one.length > two.length) ? one : two;
  const smaller = (bigger == one)? two : one;
  
  return bigger.map(  (item,pos) => Object.assign({},smaller[pos],item) );

}


console.log("order1",mergeArrays(array1,iconsStepper));
console.log("order2",mergeArrays(iconsStepper,array1));

user_27296050

You can achieve it by using Array.map() along with Object.assign()

const array1 = [
  { status: "ok", actual: true }, 
  { status: "not ok" }
];

const iconsStepper = [
  { icon: 'x' },
  { icon: 'xx' },
  { icon: 'xxx' }
];

const res = iconsStepper.map((obj, index) => Object.assign(obj, array1[index]));

console.log(res);

user_41163000
Related