James111 James111 - 7 months ago 10
Javascript Question

How can I merge an array of objects?

Say I had an array of articles, each article may or may not have more than 1 image object, now since mysql can't group together objects, you have to do it yourself. So the result is you getting near duplicate article objects...where the only difference is the image object. By near duplicate i mean the only difference in the returned result is the image object.

I'm trying to find a way to loop through the

articles
array and elimate duplicate objects and create an
images
array which will hold each
article
image objects.

For example given the below array of articles:

{ articles: [
{article: {articleId: 10, articleText: 'blah'}, image: {articleId: 10, imageUrl: 'http://differentUrlTooBelow'} },
{article: {articleId: 10, articleText: 'blah'}, image: {articleId: 10, imageUrl: 'http://AnotherUrlDifferentToAbove'} },
{article: {articleId: 11, articleText: 'ajsdnfa'}, image: {articleId: 11, imageUrl: 'http://DifferentUrlTooBelow'} },
{article: {articleId: 11, articleText: 'asfdjnasjdf'}, image: {articleId: 11, imageUrl: 'http://AnotherUrlDifferentToAbove'} },
]}


We could use the lodash reduce function, but it seems to only return the last
article (articleId: 11)
...It doesn't seem to find all it's images either. It will just create an images array inside each article. Note that res is the array of article objects (Like shown above)

var z = _.reduce(res, function(result, value, key) {
if (key == 0) return;
if(value.article['articleId'] == res[key-1].article['articleId']) {
result = value;
result.images = [];
result.images.push(result.image);
}

return result;
}, {});


The end result would look something like this:

{ articles: [
{article: {articleId: 10, articleText: 'blah'},
images: [
{articleId: 10, imageUrl: 'http://differentUrlTooBelow'},
{articleId: 10, imageUrl: 'http://AnotherUrlDifferentToAbove'}
]},
{article: {articleId: 11, articleText: 'blah'},
images: [
{articleId: 11, imageUrl: 'http://differentUrlTooBelow'},
{articleId: 11, imageUrl: 'http://AnotherUrlDifferentToAbove'}
]},
]}

Answer

You can make use of _.groupBy() to match article.articleId, then _.map() to associate each article using the first item and then set the image property by getting all image items through _.map().

var data = { 
  articles: [
   {
     article: {articleId: 10, articleText: 'blah'}, 
     image: { articleId: 10, imageUrl: 'http://differentUrlTooBelow' } 
   },
   {
     article: {articleId: 10, articleText: 'blah'}, 
     image: { articleId: 10, imageUrl: 'http://AnotherUrlDifferentToAbove' } 
   },
   {
     article: {articleId: 11, articleText: 'ajsdnfa'}, 
     image: { articleId: 11, imageUrl: 'http://DifferentUrlTooBelow' }
   },
   {
     article: {articleId: 11, articleText: 'asfdjnasjdf'}, 
     image: { articleId: 11, imageUrl: 'http://AnotherUrlDifferentToAbove' } 
   }
  ]
};

var result = {
  articles: _(data.articles)
    .groupBy('article.articleId')
    .map(function(items) {
      return _(items[0])
        .omit('image')
        .set('images', _.map(items, 'image'))
        .value();
    })
    .value()
};

document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.11.2/lodash.js"></script>

Comments