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 — pilchard
– pilchard, Commented Oct 20, 2021 at 13:42
also: Group objects by common property merging the rest of properties as separate objects within array and Group array items using object — pilchard
– pilchard, Commented Oct 20, 2021 at 13:43
For consecutive elements: Group same elements in JS array, but only when consecutive — pilchard
– pilchard, Commented Oct 20, 2021 at 13:47
In the future try to provide a minimal reproducible example which doesn't require a fine-toothed comb to identify the changes. — pilchard
– pilchard, Commented Oct 20, 2021 at 14:07

I wrestled a bear once. · Accepted Answer · 2021-10-20 13:58:15Z

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);

I wrestled a bear once. · Accepted Answer · 2021-10-20 13:55:55Z

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..

Collectives™ on Stack Overflow

Array of objects, join similar objects to one object

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related