CODEWITHSUNDEEP
javascriptarrayslodash
James111
James111

Reputation: 15903

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'} 
   ]},
]}

Upvotes: 2

Views: 73

Answers (1)

ryeballar
ryeballar

Reputation: 30088

You can make use of _.groupBy() to match article.articleId, then _.map() to associate each article using the first item and then set the images 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>

Upvotes: 2

Related Questions