Develop Reference

How to merge strings from forEach loop to an array [duplicate] - javascript

This question already has answers here:
From an array of objects, extract value of a property as array
(24 answers)
Closed 3 years ago.
Here is my code. (sorry about ugly json data)
var data = [{"ImageSets":[{"ImageSet":[{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/81OWhCeCRtL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/71e4eChoGzL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/71qsXsLLRWL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/91hyvNK4stL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/816DOkjvgKL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"variant"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/819xXjN-ghL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]},{"$":{"Category":"primary"},"SwatchImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL30_.jpg"],"Height":[{"_":"30","$":{"Units":"pixels"}}],"Width":[{"_":"30","$":{"Units":"pixels"}}]}],"SmallImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"ThumbnailImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],"Height":[{"_":"75","$":{"Units":"pixels"}}],"Width":[{"_":"75","$":{"Units":"pixels"}}]}],"TinyImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL110_.jpg"],"Height":[{"_":"110","$":{"Units":"pixels"}}],"Width":[{"_":"110","$":{"Units":"pixels"}}]}],"MediumImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL160_.jpg"],"Height":[{"_":"160","$":{"Units":"pixels"}}],"Width":[{"_":"160","$":{"Units":"pixels"}}]}],"LargeImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"],"Height":[{"_":"500","$":{"Units":"pixels"}}],"Width":[{"_":"500","$":{"Units":"pixels"}}]}],"HiResImage":[{"URL":["https://images-na.ssl-images-amazon.com/images/I/71-w1EWOaWL.jpg"],"Height":[{"_":"2560","$":{"Units":"pixels"}}],"Width":[{"_":"2560","$":{"Units":"pixels"}}]}]}]}]}]
data[0].ImageSets[0].ImageSet.forEach((image) => {
var images = image.LargeImage[0].URL[0]
console.log(images)
})
I'm getting all URL's in console log.
I tried to merge them with split() but it's not working. Each string is getting its own array. Similarly if i use var images = image.LargeImage[0].URL. Each string return it's own array.
What i want is a single array with all URL's like this.
["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg", "https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg", "https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg", "https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg", "https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg", "https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg","https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"]
Thanks.

It makes more sense here to just use .map(), as it will create a new Array with the return value of each iteration
var data=[{ImageSets:[{ImageSet:[{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/81OWhCeCRtL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71e4eChoGzL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71qsXsLLRWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/91hyvNK4stL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/816DOkjvgKL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/819xXjN-ghL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"primary"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71-w1EWOaWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]}]}]}];
let urlsArray = data[0].ImageSets[0].ImageSet.map((image) => {
return image.LargeImage[0].URL[0];
});
console.log(urlsArray);
This is how you would do it with .forEach(), additionally
var data=[{ImageSets:[{ImageSet:[{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41NeQS3RMzL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/81OWhCeCRtL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/316W1tHrMuL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71e4eChoGzL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/31TgrPVXYjL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71qsXsLLRWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/51qcfjgaAZL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/91hyvNK4stL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41numbb3sgL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/816DOkjvgKL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"variant"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41PLx0E2sqL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/819xXjN-ghL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]},{$:{Category:"primary"},SwatchImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL30_.jpg"],Height:[{_:"30",$:{Units:"pixels"}}],Width:[{_:"30",$:{Units:"pixels"}}]}],SmallImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],ThumbnailImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL75_.jpg"],Height:[{_:"75",$:{Units:"pixels"}}],Width:[{_:"75",$:{Units:"pixels"}}]}],TinyImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL110_.jpg"],Height:[{_:"110",$:{Units:"pixels"}}],Width:[{_:"110",$:{Units:"pixels"}}]}],MediumImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL._SL160_.jpg"],Height:[{_:"160",$:{Units:"pixels"}}],Width:[{_:"160",$:{Units:"pixels"}}]}],LargeImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/41bz4b5IbLL.jpg"],Height:[{_:"500",$:{Units:"pixels"}}],Width:[{_:"500",$:{Units:"pixels"}}]}],HiResImage:[{URL:["https://images-na.ssl-images-amazon.com/images/I/71-w1EWOaWL.jpg"],Height:[{_:"2560",$:{Units:"pixels"}}],Width:[{_:"2560",$:{Units:"pixels"}}]}]}]}]}];
let urlsArray = [];
data[0].ImageSets[0].ImageSet.map((image) => {
urlsArray.push(image.LargeImage[0].URL[0]);
});
console.log(urlsArray);

Related

This question already has answers here:
Group array items using object
(19 answers)
How can I group an array of objects by key?
(32 answers)
Closed last month.
I am trying to create a new array of objects by comparing two arrays.One array contains the ids to be compared and the other contains the dataset which should be compared with the first array are a new array of object must be created.
Let me explain this in detail
Consider array 1:
['1','2']
Array 2
[{name:'Linus',id:'1'},{name:'Anthony',id:'1'},{name:'Jake',id:'2'},{name:'Eva',id:'2'}]
What I am expecting as a output is:
[
{id:'1',users:[{name:'Linus',id:'1'},{name:'Anthony',id:'1'}]},
{id:'2',users:[{name:'Jake',id:'2'},{name:'Eva',id:'2'}
]
I am not sure what has to be done.

Something like this for example
const ids = ['1','2'];
const users = [{name:Linus,id:'1'},{name:Anthony,id:'1'},{name:Jake,id:'2'},{name:Eva,id:'2'}];
const groups = ids.map(id =>{
return {
id,
users: users.filter(u => u.id === id)
}
})

const groupBy = ['1','2'];
const data = [{name:'Linus',id:'1'},{name:'Anthony',id:'1'},{name:'Jake',id:'2'},{name:'Eva',id:'2'}];
const result = groupBy.map(id => {
return {
id,
users: data.filter(item => item.id == id),
}
})
console.log(result);
Try this code

This question already has an answer here:
Dynamic object property names?
(1 answer)
Closed 8 months ago.
so i have this JSON file:
{"fjord-200-200.jpg":[]}
I read it using
let data = fs.readFileSync(cachedName);
let cachedInJSON: JSON = JSON.parse(data.toString());
so i have now JSON object, that i want to append to this new JSON object
let newData = {
fileNameFormatted: []
}
when i tried using
let newJson = {...cachedInJSON, ...newData}
Result was this:
{"fjord-200-200.jpg":[],"fileNameFormatted":[]}
Wanted result that i want to achieve is:
{"fjord-200-200.jpg":[],"fjord-300-300.jpg":[]}
fileNameFormatted is a variable holding fjord-300-300.jpg

let newData = {
[fileNameFormatted]: [] // Notice the brackets around the key
}

This question already has answers here:
Push Object in Array [duplicate]
(2 answers)
Does JavaScript pass by reference? [duplicate]
(13 answers)
Closed 3 years ago.
I'm trying to store the objects into Javascript array.
var res=[
{name:'Alex',place:'US',age:20},
{name:'Jason',place:'Canada',age:25}
];
var obj={};
var data=[];
for ( let i in res){
obj.name=res[i].name;
obj.place=res[i].place;
data.push(obj);
}
console.log(data);
My expected output:
[
{name:'Alex',place:'US'}.
{name:'Jason',place:'Canada'}
]
Actual output I got:
[
{name:'Jason',place:'Canada'},
{name:'Jason',place:'Canada' }
]
Why I'm getting this type of output?
I'm noobie.Please help me.

You only have one object in memory with your var obj={}; - that line runs once, and creates one object in memory, which you then proceed to mutate on every iteration in the for loop, and push to the array. At the end, the array contains 2 references to the same object.
Create the object inside the loop instead:
for ( let i in res){
var obj = {};
obj.name=res[i].name;
obj.place=res[i].place;
data.push(obj);
}
You could also consider using .map instead:
const res=[
{name:'Alex',place:'US',age:20},
{name:'Jason',place:'Canada',age:25}
];
const data = res.map(({ name, place }) => ({ name, place }));
console.log(data);

You are basically updating the same object again and again in your loop. You need to have different objects for each loop. Hence, you need to move var obj={} inside the for loop.
var res=[{name:'Alex',place:'US',age:20},{name:'Jason',place:'Canada',age:25}];
var data=[];
for ( let i in res){
var obj={};
obj.name=res[i].name;
obj.place=res[i].place;
data.push(obj);
}
console.log(data);

Using .map would be much easier
var res=[
{name:'Alex',place:'US',age:20},
{name:'Jason',place:'Canada',age:25}
];
var obj={};
var data = res.map(({ name, place }) => {
return ({ name, place })
});
console.log(data);

This question already has answers here:
Strange behavior of an array filled by Array.prototype.fill()
(9 answers)
Closed 3 years ago.
I am trying to create an array which has a defined length and fill it with empty arrays. I've tried using all possibilities given by #stpoa's answer here but my array does not behave correctly.
Given the code (I simplified it for the sake of example):
const tasksArray = Array(3).fill([])
const tasksArray2 = [[], [], []]
const tasks = ['task1', 'task2']
const fillWithData = (array) => {
tasks.forEach(task => {
array[0].push(task)
})
}
Gives me an incorrect output for tasksArray and a obviously a correct one for tasksArray2 which is hardcoded
fillWithData(tasksArray) // [['task1', 'task2'], ['task1', 'task2'], ['task1', 'task2']] => not OK, duplicates values!
fillWithData(tasksArray2) // [['task1', 'task2'], [], []] => that's OK

In taskArray, the [] you are using is passed as a reference, and the elements in taskArray all reference the same array.
In taskArray2, you have three separate empty arrays, [], each with their own reference. Therefore you do not get duplicated values.
If you wish to create an array of empty arrays programmatically, use Array.from -
const fillEmptyArrays = (count) =>
Array.from(Array(count), _ => [])
const tasks =
fillEmptyArrays(3)
console.log(tasks)
// [ [], [], [] ]
And please don't include type names like Array in your variable names tasksArray; just name it tasks. JavaScript is a dynamically-typed language and this kind of thinking hurts you in the long run.

You need to get independent object references inside of the array, instead of having literally the constant value.
By taking Array.from with an object with a length property and the build in mapping function, you could get an array of independent arrays.
const tasksArray = Array.from({ length: 3 }, _ => [])
const tasks = ['task1', 'task2']
const fillWithData = (array) => {
tasks.forEach(task => {
array[0].push(task)
})
};
fillWithData(tasksArray);
console.log(tasksArray);

fill puts the value you pass it at each index of the array.
So tasksArray has three references to the same array, while tasksArray2 has a reference to each of three different arrays.
If you want to put three different arrays in there, then you need to explicitly create three arrays.
You could approach it with a counter:
const tasksArray2 = [];
let count = 3;
while (count--) {
tasksArray2.push([]);
}

This question already has answers here:
Creating array of length n with random numbers in JavaScript
(6 answers)
Closed 5 years ago.
const array = new Array(10);
array.fill('hi');
console.log(array);
Using Array::fill to populate a value on the whole array or part of the array.
I have a string generator function that generates a random string.
const getString = () => Math.random().toString(36).replace(/[^a-z]+/g, '');
console.log(getString())
console.log(getString())
console.log(getString())
I want to fill the array with different values by executing the string generator function each time .
It cannot done by one line in fill , however, I found a workaround leveraging the signature of fill : arr.fill(value[, start = 0[, end = this.length]])
const getString = () => Math.random().toString(36).replace(/[^a-z]+/g, '');
const array = new Array(10);
for (var i=0; i < array.length;i++ ) {
array.fill(getString(), i, i + 1);
}
console.log(array);
Does fill supports callbacks that can be executed each iteration to generate different values ?
If no, what is the alternative ?

We can reach the same result in one line combining map and fill :
array.fill().map(getString)
const getString = () => Math.random().toString(36).replace(/[^a-z]+/g, '');
const array = new Array(10);
console.log(array.fill().map(getString))