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',
],
},
];
CodePudding user response：
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);CodePudding user response：
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.