How to merge JavaScript object array using reduce?

Question

There's so many of post here regarding merging javaScript array objects relative to my question most of them are merging 2 arrays in my case it's different.

I have JSON from API I mapped and filtered them because i only need the 'tags'

Here's my code:

JSON.map((key) => (key.tags))
.filter(function (element) {
    return element !== undefined;
})

Here's my result:

   [ 
      { 
    "web_devt": { 
      "item_id": "858850847", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "web_devt": { 
      "item_id": "1004644524", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "pdo": { 
      "item_id": "1056300113", 
      "tag": "pdo" 
    }, 
    "php": { 
      "item_id": "1056300113", 
      "tag": "php" 
    }, 
    "web_devt": { 
      "item_id": "1056300113", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "parallax scrolling": { 
      "item_id": "1087678088", 
      "tag": "parallax scrolling" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2435593852", 
      "tag": "react" 
    } 
  }, 
  { 
    "javascript": { 
      "item_id": "2435595088", 
      "tag": "javascript" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2465629468", 
      "tag": "react" 
    } 
  } 
]

I want to merge them like this:

[
{
"web_devt": [
    item_id: "765558416", 
        item_id: "765558416",
        item_id: "765558416",
        ...]
},
 {
"react": [
    item_id: "765558416",
    item_id: "765558416",
    item_id: "765558416",
    ...]
},
{
"JavaScipt": [
    item_id: "765558416",
    item_id: "765558416",
    item_id: "765558416",
    ...]
}

]

and so on ... Basically all the same tags will merge How you do this in reduce or any solution but not loadash or any third party?

Your desired output's syntax is invalid. Arrays do not have key-value pairs, only values. — CertainPerformance
– CertainPerformance, Commented Feb 27, 2019 at 5:24
@Shidersz, the second suggesstion you gave is also invalid since you cannot have multiple keys of the same name in an object — Shubham Khatri
– Shubham Khatri, Commented Feb 27, 2019 at 5:32
@ShubhamKhatri You are right, I wish I can edit my comment still, but I will have to delete instead... — Shidersz
– Shidersz, Commented Feb 27, 2019 at 5:35

Shubham Khatri · Accepted Answer · 2019-02-27 05:51:39Z

Your desired output syntax is invalid. You cannot have an array with keys nor you can have an object with multiple keys of the same name.

However if you want have an array of ids, you could use reduce and group the data and for the individual item use Object.entries to get the key and the value within the object.

var data = [ 
  { 
    "web_devt": { 
      "item_id": "858850847", 
      "tag": "web_devt" 
  } 
  }, 
  { 
    "web_devt": { 
      "item_id": "1004644524", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "pdo": { 
      "item_id": "1056300113", 
      "tag": "pdo" 
    }, 
    "php": { 
      "item_id": "1056300113", 
      "tag": "php" 
    }, 
    "web_devt": { 
      "item_id": "1056300113", 
      "tag": "web_devt" 
    } 
  }, 
  { 
    "parallax scrolling": { 
      "item_id": "1087678088", 
      "tag": "parallax scrolling" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2435593852", 
      "tag": "react" 
    } 
  }, 
  { 
    "javascript": { 
      "item_id": "2435595088", 
      "tag": "javascript" 
    } 
  }, 
  { 
    "react": { 
      "item_id": "2465629468", 
      "tag": "react" 
    } 
  } 
] 

const res = data.reduce((acc, item) => {
  Object.entries(item).forEach((attr) => {
    const [key,value] = attr;
    if(value.tag !== undefined) {
      if (acc[key]){
        acc[key].push(value.item_id);
      }
      else {
        acc[key] = [value.item_id];
      }
    }
  });
  
  return acc;
}, {})
console.log(res);

CertainPerformance · Accepted Answer · 2019-02-27 05:46:26Z

1

Assuming that the inner arrays are meant to contain objects, use .reduce to group the input objects into an object indexed by item_id, then transform that object into an array using Object.entries:

const input = [ { 
    "web_devt": { 
      "item_id": "858850847",
      "tag": "web_devt" 
    } 
  },  
  { 
    "web_devt": { 
      "item_id": "1004644524",
      "tag": "web_devt" 
    } 
  },  
  { 
    "pdo": { 
      "item_id": "1056300113",
      "tag": "pdo" 
    },
     
    "php": { 
      "item_id": "1056300113",
      "tag": "php" 
    },
     
    "web_devt": { 
      "item_id": "1056300113",
      "tag": "web_devt" 
    } 
  },  
  { 
    "parallax scrolling": { 
      "item_id": "1087678088",
      "tag": "parallax scrolling" 
    } 
  },  
  { 
    "react": { 
      "item_id": "2435593852",
      "tag": "react" 
    } 
  },  
  { 
    "javascript": { 
      "item_id": "2435595088",
      "tag": "javascript" 
    } 
  },  
  { 
    "react": { 
      "item_id": "2465629468",
      "tag": "react" 
    } 
  } 
];
const outputObj = input.reduce((a, outerObj) => {
  Object.entries(outerObj).forEach(([key, { item_id }]) => {
    if (!a[key]) a[key] = [];
    a[key].push({ item_id });
  });
  return a;
}, {});
const output = Object.entries(outputObj).map(([key, arr]) => ({ [key]: arr }));
console.log(output);

edited Feb 27, 2019 at 5:46

answered Feb 27, 2019 at 5:29

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

2 Comments

devjson Over a year ago

Sorry for my ignorance, Why use Object.entries not Object.values ? It's because Object.entries(obj) – returns an array of [key, value] pairs. and Object.values(obj) – returns an array of values we can return key and value here right?

CertainPerformance Over a year ago

Sure, you can use either, it's up to you. If the key name is different from the tag, and you want the tag, then use Object.values instead.

Shidersz · Accepted Answer · 2019-02-27 05:52:14Z

1

Here is my try using Array.reduce() with a nested Object.values() and Array.forEach():

const input = [ 
  { 
    "web_devt": {"item_id": "858850847", "tag": "web_devt"} 
  }, 
  { 
    "web_devt": {"item_id": "1004644524", "tag": "web_devt"} 
  }, 
  { 
    "pdo": {"item_id": "1056300113", "tag": "pdo"}, 
    "php": {"item_id": "1056300113", "tag": "php"}, 
    "web_devt": {"item_id": "1056300113", "tag": "web_devt"} 
  }, 
  { 
    "parallax scrolling": {"item_id": "1087678088", "tag": "parallax scrolling"} 
  }, 
  { 
    "react": { "item_id": "2435593852", "tag": "react"} 
  }, 
  { 
    "javascript": {"item_id": "2435595088", "tag": "javascript"} 
  }, 
  { 
    "react": {"item_id": "2465629468", "tag": "react"} 
  } 
];

let res = input.reduce((acc, obj) =>
{
    Object.values(obj).forEach(({item_id, tag}) =>
    {
        acc[tag] = acc[tag] || {[tag]:[]}
        acc[tag][tag].push(item_id);
    });
    return acc;
}, {});

console.log(Object.values(res));

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

edited Feb 27, 2019 at 5:52

answered Feb 27, 2019 at 5:47

Shidersz

17.2k2 gold badges28 silver badges52 bronze badges

2 Comments

devjson Over a year ago

Thank you for your response to my question. I tried this and it works.

Shidersz Over a year ago

@GLEN87 I'm glad to help, remember to vote-up the answers that helps you and to accept one of the answers.

Collectives™ on Stack Overflow

How to merge JavaScript object array using reduce?

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related