Question

0

82

Views

JavaScript filter object resemble key name and push to arr

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?

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-03T02:24:32.983Z

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

Answer 2 · 2022-07-03T02:24:32.991Z

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

Answer 3 · 2022-07-03T02:24:32.999Z

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.

0

82

JavaScript filter object resemble key name and push to arr

3 answers

0

0

0

Find remote jobs

Andres GPT