Home > OS >  How to merge elements in objects inside of array and returned unique objects with updated data
How to merge elements in objects inside of array and returned unique objects with updated data

Time:05-12

my question is how I can merge elements in array of objects and return array with unique objects. I was trying to use reduce but it's looks like I missing something and it's time to ask for hint. So how you can see I need merge elements of boolean where false is default value and true is new data, and return unique objects based on name. Thank you for help.

const arr = [
    {
      code: 'test1',
      name: 'TEST1',
      url: '/test1',
      elements: {
        option1: true,
        option2: false,
        option3: false,
        option4: false,
        option5: false
      }
    },
      {
        code: 'test1',
        name: 'TEST1',
        url: '/test1',
        elements: {
          option1: false,
          option2: false,
          option3: true,
          option4: false,
          option5: false
      }
      },
        {
        code: 'test1',
        name: 'TEST1',
        url: '/test1',
        elements: {
          option1: false,
          option2: false,
          option3: false,
          option4: true,
          option5: false
      }
      },
       {
        code: 'test2',
        name: 'TEST2',
        url: '/test2',
        elements: {
          option1: false,
          option2: false,
          option3: true,
          option4: false,
          option5: false
      }
      },
    ]

and output it should be:

const arr = [
    {
      code: 'test1',
      name: 'TEST1',
      url: '/test1',
      elements: {
        option1: true,
        option2: false,
        option3: true,
        option4: true,
        option5: false
      }
    },
       {
        code: 'test2',
        name: 'TEST2',
        url: '/test2',
        elements: {
          option1: false,
          option2: false,
          option3: true,
          option4: false,
          option5: false
      }
      },
    ]

CodePudding user response:

Working on the assumption that elements is the only thing that actually varies here, and that you can't switch back from false to true (since that what it seems like you are going for), you'd need to iterate over the key-value pairs in elements and set it to the originalValue || newValue, so something like this:

const arr = [
    {
      code: 'test1',
      name: 'TEST1',
      url: '/test1',
      elements: {
        option1: true,
        option2: false,
        option3: false,
        option4: false,
        option5: false
      }
    },
      {
        code: 'test1',
        name: 'TEST1',
        url: '/test1',
        elements: {
          option1: false,
          option2: false,
          option3: true,
          option4: false,
          option5: false
      }
      },
        {
        code: 'test1',
        name: 'TEST1',
        url: '/test1',
        elements: {
          option1: false,
          option2: false,
          option3: false,
          option4: true,
          option5: false
      }
      },
       {
        code: 'test2',
        name: 'TEST2',
        url: '/test2',
        elements: {
          option1: false,
          option2: false,
          option3: true,
          option4: false,
          option5: false
      }
      },
    ].reduce((carry, current) => {
        const existing = carry.find(item => item.code === current.code);
        if (!existing) {
            carry.push(current);
        } else {
            Object.entries(current.elements).forEach(([k, v]) => {
                existing.elements[k] = existing.elements[k] || current.elements[k];
            });
        }
        return carry;
    }, []);
    
    console.log(arr);

  • Related