React JS how to copy array into object/dictionary array

Question

I have the below list represents images sources coming from Flask backend,

[
   "www.example.com","www.example2.com","www.example3.com"...
]

Now I'm trying to use the react react-image-gallery to display all those images. From the tutorial I see I need to make it like below:

const images = [
  {
    original: "www.example.com",
    thumbnail: "www.example.com/thumbnail",
  }
]

I'm confused about how to make the array list of images URLs mapped into this object/dictionary array? Ideally I need to make it like:

const images = [
  {
    original: "www.example.com",
    thumbnail: "www.example.com/thumbnail",
  },
  {
    original: "www.example2.com",
    thumbnail: "www.example2.com/thumbnail",
  },
  {
    original: "www.example3.com",
    thumbnail: "www.example3.com/thumbnail",
  }......
]

Could anyone please enlighten me? Any help will be much appreciated!

Tasos K. · Accepted Answer · 2022-11-30 14:01:08Z

2

You can map over source array as:

const srcArr = ["www.example.com", "www.example2.com", "www.example3.com"]

const result = srcArr.map(original => ({ original, thumbnail: `${original}/thumbnail`}));
console.log(result)

edited Nov 30, 2022 at 14:01

Tasos K.

8,1057 gold badges44 silver badges68 bronze badges

answered Nov 27, 2022 at 15:06

DecPK

25.4k6 gold badges32 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sachila Ranawaka · Accepted Answer · 2022-11-27 15:06:23Z

2

Just use map

const list = [
   "www.example.com","www.example2.com","www.example3.com",
  
]

const result = list.map(item => {
  return {
     original: item,
     thumbnail: `${item}/thumbnail`,
  }
})

console.log(result)

answered Nov 27, 2022 at 15:06

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Comments

king · Accepted Answer · 2022-11-27 15:16:30Z

0

Array.prototype.map() is a good choice.

Maybe you should learn some prototype methods of Array here.

edited Nov 27, 2022 at 15:16

answered Nov 27, 2022 at 15:12

king

11 bronze badge

Collectives™ on Stack Overflow

React JS how to copy array into object/dictionary array

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related