How to push array of objects to a new array variable inside another object inside array by value?

Question

I have 2 array that consist object :

a = 
[
 {
  id: 105647,
  name: 'name1'
 },
 {
  id: 105941,
  name: 'name2'
 },
 {
  id: 106177,
  name: 'name3'
 }
]

b = 
[
 [
  {
   id: 105647,
   transactionDate: '2022-03-21',
   order: 1
  },
  {
   id: 105647,
   transactionDate: '2022-03-22',
   order: 2
  }
 ],
 [
  {
   id: 106177,
   transactionDate: '2022-03-24',
   order: 1
  },
 ]
]

As you can see, that in b is not always have data for each id in variable a.

And my desired output would be

a = 
[
 {
  id: 105647,
  name: 'name1',
  dataB:
   [
    {
     id: 105647,
     transactionDate: '2022-03-21',
     order: 1
    },
    {
     id: 105647,
     transactionDate: '2022-03-22',
     order: 2
    }
   ]
 },
 {
  id: 105941,
  name: 'name2'
 },
 {
  id: 106177,
  name: 'name3',
  dataB: 
   [
    {
     id: 106177,
     transactionDate: '2022-03-24',
     order: 1
    },
   ]
  }
]

the b variable should be pushed to new variable dataB inside object of array on variable a. And if no dataB exist on a it would not create dataB on a / create the dataB but with empty array.

I was already try with some

for (let i = 0; i<a.length; i++) {
  a[i]['dataB'] = b[i]
}

the result is not pushed by id, but by index. The problem is b not always have data for each id in variable a. And what i'm trying was not what i looking for.

Please ask me if you need more information if it's still not enough to solve that case.

The general process to solve problems like this is to create an object that uses the ID values as keys. Then when you loop over the other array, it's easy to find the object with the same ID. — Barmar
– Barmar, Commented Apr 15, 2022 at 15:01
To add on, if the values corresponding to the ID keys (from b) are arrays, then when you .map over a, things become much more easier to transform elements of a as per your target structure. — jsN00b
– jsN00b, Commented Apr 15, 2022 at 15:03

PeterKA · Accepted Answer · 2022-04-15 20:21:18Z

1

If your goal is to modify a, as opposed to creating a new array, you can use Array#forEach and Array#filter methods as follows:

const a = [ { id: 105647, name: 'name1' }, { id: 105941, name: 'name2' }, { id: 106177, name: 'name3' } ]; 
const b = [ [ { id: 105647, transactionDate: '2022-03-21', order: 1 }, { id: 105647, transactionDate: '2022-03-22', order: 2 } ], [ { id: 106177, transactionDate: '2022-03-24', order: 1 }, ] ];

a.forEach((elA,i) => {
    const others = b.filter(elB => elB.every(o => o.id === elA.id)).flat();
    a[i] = others.length ? {...elA, dataB: others} : elA;
});

console.log( a );

Since in b the items are already grouped by id, Array#find may be a better method, and will not need the use of Array#flat:

const a = [ { id: 105647, name: 'name1' }, { id: 105941, name: 'name2' }, { id: 106177, name: 'name3' } ]; 
const b = [ [ { id: 105647, transactionDate: '2022-03-21', order: 1 }, { id: 105647, transactionDate: '2022-03-22', order: 2 } ], [ { id: 106177, transactionDate: '2022-03-24', order: 1 }, ] ];

a.forEach((elA,i) => {
    const others = b.find(elB => elB.every(o => o.id === elA.id));
    a[i] = others ? {...elA, dataB: others} : elA;
    /*OR: you can replace the above one line with the following 3
    if( others ) {
        a[i].dataB = others;
    }*/
});

console.log( a );

edited Apr 15, 2022 at 20:21

answered Apr 15, 2022 at 15:39

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

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

3 Comments

user18605090 Over a year ago

iwas trying using your code, but it's not working. My mistake, the b data actually contains 2 [] inside, i was updated on my post. Is your code can still work on that format data like that ? thanks

PeterKA Over a year ago

Take a look at the updated code.

user18605090 Over a year ago

thankss, it's perfectly work like i would

shutsman · Accepted Answer · 2022-04-15 19:58:08Z

1

loop thought a array,

on each iteration find all matches

if array is not empty - assign it to new field dataB

    const a = 
    [
     {
      id: 105647,
      name: 'name1'
     },
     {
      id: 105941,
      name: 'name2'
     },
     {
      id: 106177,
      name: 'name3'
     }
    ]

    const b = 
[
 [
  {
   id: 105647,
   transactionDate: '2022-03-21',
   order: 1
  },
  {
   id: 105647,
   transactionDate: '2022-03-22',
   order: 2
  }
 ],
 [
  {
   id: 106177,
   transactionDate: '2022-03-24',
   order: 1
  },
 ]
];

    const result = a.map(i => {
    const foundTrancactions = b.flat().filter(el => el.id === i.id);
return {...i, ...(foundTrancactions?.length ? {dataB: foundTrancactions} : {})}
    })

    console.log(result)

UPDATE

have changed b array
added flat() for b

edited Apr 15, 2022 at 19:58

answered Apr 15, 2022 at 15:04

shutsman

2,5101 gold badge17 silver badges26 bronze badges

6 Comments

jsN00b Over a year ago

You may need to notify that a will no longer remain what it was. After console.log(result), you may do a console.log(a) to observe that it has also changed. This is because i is being mutated.

shutsman Over a year ago

I have updated, thanks

user18605090 Over a year ago

i was using your code, but the dataB is not show

user18605090 Over a year ago

ohh my bad, the b data was different. I was updating my code above, there's double [] actually on b, how to make your code working on data like that ? thanks @shutsman

shutsman Over a year ago

@user18605090 I have updated answer, simply need to add flat() before filter()

|

jsN00b · Accepted Answer · 2022-04-16 00:13:50Z

0

This solution is non-mutating and employs the idea shared by Barmar in comments above.

Code Snippet

const getTransformedArray = (orig, delta) => {
  // first, construct a key-value pair using "b" array (called "delta" here)
  const deltaMap = delta
    .flat()       // since "b" is nested, use ".flat()" to flatten it
    .reduce(
      (acc, itm) => ({
        ...acc,         // retain existing results from "acc" (accumulator)
        [itm.id]: (
          acc[itm.id] || []     // if "itm.id" already exists, keep its array
        ).concat([{...itm}])    // append the current "itm"
      }),
      {}                // "acc" is initially set to empty object "{}"
    );
  // now, iterate through "a" array (named "orig" here)
  return orig.map(
    ({id, name}) => ({    // de-structure to directly access "id", "name" props
      id, name,           // retain "id", "name"
      ...(                // add new prop "dataB" only if it's in deltaMap
        id in deltaMap
        ? { dataB: deltaMap[id] }
        : {}              // if no matching "id" in "deltaMap", don't add "dataB"
      )
    })
  );
};


const a = 
[
 {
  id: 105647,
  name: 'name1'
 },
 {
  id: 105941,
  name: 'name2'
 },
 {
  id: 106177,
  name: 'name3'
 }
]

const b = [
 [
  {
   id: 105647,
   transactionDate: '2022-03-21',
   order: 1
  },
  {
   id: 105647,
   transactionDate: '2022-03-22',
   order: 2
  }
 ],
 [
  {
   id: 106177,
   transactionDate: '2022-03-24',
   order: 1
  },
 ]
];

// invoke the transform function
console.log('transformed array: ', getTransformedArray(a, b));

// display "a" and "b" arrays to show those were not mutated
console.log('original a: ', a);
console.log('original b: ', b);

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

Explanation

Inline comments provided in the snippet above.

edited Apr 16, 2022 at 0:13

answered Apr 15, 2022 at 15:21

jsN00b

3,7032 gold badges10 silver badges22 bronze badges

2 Comments

user18605090 Over a year ago

my bad, the b data was actually has 2 [], i was updated on my post. That's why your code still not working on me. Can you provide with my updates ?

jsN00b Over a year ago

Just needed to add one ".flat()" in the method. It's updated.

Collectives™ on Stack Overflow

How to push array of objects to a new array variable inside another object inside array by value?

3 Answers 3

3 Comments

6 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

6 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related