JavaScript filter object resemble key name and push to arr-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

Array.reduce implementation.

Taking into consideration that the keys are always PictureDescription and PictureUrl plus an index

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 = Object.entries(Picture).reduce((acc, curr) => {
    const [key, value] = curr;
    if(key.includes('PictureDescription')) {
        const index =  key[key.length - 1];
        acc.push({
            url: Picture[`PictureUrl${index}`],
            description: Picture[`PictureDescription${index}`]
        })
    }
    return acc;
}, []);
console.log(arr);

CodePudding user response：

With ES6 syntax you can do something like this.

[1,2,3].map(item=>({url:Picture[`PictureUrl${item}`],description:Picture[`PictureDescription${item}`]}))