Array of objects, join similar objects to one object

Question

Basically, I want to convert this array of objects:

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    image: 'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://mankground-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    children: [{ text: '' }],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
];

To this array of objects:

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    images: [
      'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    ],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
];

As you can see, the:

{
  type: 'image',
  image: 'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
  children: [{ text: '' }],
},
{
  type: 'image',
  image: 'https://mankground-png.png',
  children: [{ text: '' }],
},
{
  type: 'image',
  image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
  children: [{ text: '' }],
},

It's replaced with:

{
  type: 'image',
  images: [
    'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
    'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
  ],
},

So, I'd like to know what's the best way to take all the objects that have type: image and join them to one object with an array of these images... Also, in this example, there's just one group of type: image images, but maybe could exist something like this; Where there are many type: image objects...

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    image: 'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://mankground-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    children: [{ text: '' }],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
  {
    type: 'image',
    image: 'https://mankground-png.png',
    children: [{ text: '' }],
  },
  {
    type: 'image',
    image: 'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    children: [{ text: '' }],
  },
];

Which, the solution would be something like this:

[
  { type: 'heading-one', children: [{ text: 'Introduction' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating ' }],
  },
  { type: 'heading-one', children: [{ text: 'The Challenge' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By .' }],
  },
  { type: 'heading-one', children: [{ text: 'The result' }] },
  {
    type: 'image',
    images: [
      'https://mani62/2021-10-19T16:36:45.514Z-tkabg-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    ],
  },
  { type: 'heading-one', children: [{ text: 'Conclusion' }] },
  {
    type: 'paragraph',
    children: [{ text: 'By creating an Ac.' }],
  },
  {
    type: 'image',
    images: [
      'https://mankground-png.png',
      'https://manife6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png',
    ],
  },
];

Does this answer your question? [Group objects by multiple properties and merge array property](https://stackoverflow.com/questions/66608493/group-objects-by-multiple-properties-and-merge-array-property) — pilchard, Oct 20 '21 at 13:42
also: [Group objects by common property merging the rest of properties as separate objects within array](https://stackoverflow.com/questions/63377535/group-objects-by-common-property-merging-the-rest-of-properties-as-separate-obje) and [Group array items using object](https://stackoverflow.com/questions/31688459/group-array-items-using-object) — pilchard, Oct 20 '21 at 13:43
For consecutive elements: [Group same elements in JS array, but only when consecutive](https://stackoverflow.com/questions/53363702/group-same-elements-in-js-array-but-only-when-consecutive) — pilchard, Oct 20 '21 at 13:47
In the future try to provide a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) which doesn't require a fine-toothed comb to identify the changes. — pilchard, Oct 20 '21 at 14:07

I wrestled a bear once. · Accepted Answer · 2021-10-20T13:58:15.893

This uses a simple loop to group consecutive image objects in the way your example output displays them.

See the comments for an explanation.

var data = [{type:"heading-one",children:[{text:"Introduction"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"heading-one",children:[{text:"The Challenge"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"heading-one",children:[{text:"The result"}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.514Z-tkabg-background-png.png",children:[{text:""}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.516Z-58nhz-background-png.png",children:[{text:""}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png",children:[{text:""}]},{type:"heading-one",children:[{text:"Conclusion"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]}];

// This will be the final result
var merged_data = [];

// For each item in the data array..
for(i=0; i<data.length; i++){
  
  // If the current item is an image...
  if(data[i].type === "image"){
  
    // If the last item on the merged array was not an array of images
    if(merged_data[merged_data.length-1].type !== "image"){
      
      // Add an empty image array to the end of the merged array
      merged_data.push({type: "image", images: []});
    }
    
    // Add our current image to the array on the end of the merged array
    merged_data[merged_data.length-1].images.push(data[i].image);
    
  }else{
  
    // The current item isn't an image, add it to the merged array as is
    merged_data.push(data[i]);
  }
}

console.log(merged_data);

score 0 · Answer 2 · edited Oct 20 '21 at 13:55

You can use this code snippet to transform your array.

var data = [{type:"heading-one",children:[{text:"Introduction"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"heading-one",children:[{text:"The Challenge"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]},{type:"heading-one",children:[{text:"The result"}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.514Z-tkabg-background-png.png",children:[{text:""}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.516Z-58nhz-background-png.png",children:[{text:""}]},{type:"image",image:"https://manifestcmsc17f0d6ef1e94ccd9a9ff71aa6de1f0a164427-develop.s3.us-west-2.amazonaws.com/public/682a6e8c-f773-4868-9541-1cf6ce052d62/2021-10-19T16:36:45.517Z-1wwvq-background-png.png",children:[{text:""}]},{type:"heading-one",children:[{text:"Conclusion"}]},{type:"paragraph",children:[{text:"By creating an Account on our service, you agree to subscribe to newsletters, marketing or promotional materials and other information we may send. You may opt out of receiving any, or all, of these communications from us by following the unsubscribe link or instructions provided in any email we send."}]}];

const transformArray = (givenArray) => {
  let imagesArray = givenArray.filter((item) => item.type === "image");
  let withoutImageArray = givenArray.filter((item) => item.type !== "image");
  let arrayOfImageLinks = imagesArray.map((item) => item.image);
  return [...withoutImageArray, { type: "images", images: arrayOfImageLinks }];
};

console.log(transformArray(data));

Whenever you need to change the pass the array into this method and you will get the tranformed array.

This changes the order of the array though. All the images are at the end of the array instead of in-place like the example output. Clever idea though.. — I wrestled a bear once., Oct 20 '21 at 13:56

Array of objects, join similar objects to one object

2 Answers2