This is my question:
const arr = [];
const Picture = {
PictureDescription1: "this is description 1",
PictureDescription2: "this is description 2",
PictureDescription3: "this is description 3",
PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg",
}
and I want to make url and descirption to a group and push to a arr. This was my way, but I think it too lengthy:
if(Picture.PictureUrl1) {
arr.push({
url: Picture.PictureUrl1,
description: Picture.PictUrlDescription1
})
}
if(Picture.PictureUrl2) {
arr.push({
url: Picture.PictureUrl2,
description: Picture.PictUrlDescription2
})
}
if(Picture.PictureUrl3) {
arr.push({
url: Picture.PictureUrl3,
description: Picture.PictUrlDescription3
})
}
Is there any ohter way to do this?
A loop over [1, 2, 3] with bracket notation to look up the appropriate property would work.
const Picture = {
PictureDescription1: "this is description 1",
PictureDescription2: "this is description 2",
PictureDescription3: "this is description 3",
PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg",
}
const arr = [1, 2, 3]
.filter(num => Picture['PictureUrl' + num])
.map(num => ({
url: Picture['PictureUrl' + num],
description: Picture['PictureDescription' + num]
}));
console.log(arr);Here is another version that will work with any number of properties in obj:
const obj = {
PictureDescription1: "this is description 1",
PictureDescription2: "this is description 2",
PictureDescription3: "this is description 3",
PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg",
}
const arr=Object.keys(obj).filter(k=>k.slice(0,10)=="PictureUrl")
.map(k=>({url:obj[k], description: obj[k.replace("Url","Description")]}));
console.log(arr);const Picture = {
PictureDescription1: "this is description 1",
PictureDescription2: "this is description 2",
PictureDescription3: "this is description 3",
PictureUrl1:"https://www.taiwan.net.tw/att/event/8b20ab7e-90e0-49a8-9137-d140fa5d369a.jpg",
PictureUrl2:"https://www.taiwan.net.tw/att/event/7da4b849-11a7-46c8-96fb-412f187ad8bf.jpg",
PictureUrl3:"https://www.taiwan.net.tw/att/event/f04581ce-6b16-46cd-9af3-5661276b9b68.jpg",
}
const urls = Object.keys(Picture).filter(e => e.includes('Url'));
const arr = urls.map((e) => {
const descriptionKey = 'PictureDescription' + e[e.length - 1];
const description = Picture[descriptionKey] ?? '';
return {
url: Picture[e],
description: Picture[descriptionKey]
}
})
console.log(arr);Identify url keys with a logic and then iterate over it to check for description related to it.