How to push a string onto an array as a named object in javascript?

Question

How would I transform the array in imageCollection to get the array in carouselPhotos? (See code below).

export default class HomeScreen extends Component {
  
state = {
      imageCollection: [
            {
            name: "Pictures of birds"
            image1: "http://127.0.0.1:8000/media/image1A.jpg", 
            image2: "http://127.0.0.1:8000/media/image2A.jpg",
            image3: "http://127.0.0.1:8000/media/image3A.jpg"}
],
      carouselPhotos: [
      {
        image: "http://127.0.0.1:8000/media/image1A.jpg", 
      },
      {
        image: "http://127.0.0.1:8000/media/image2A.jpg",
      },
      {
        image: "http://127.0.0.1:8000/media/image3A.jpg",
      },
    ],
  };

I am using the react-native-snap-carousel, which renders 1 carousel card per object, so each image must be its own object. It is also important that the data in carouselPhotos is labeled as 'image', and it must be loaded for when the page opens.

Any help would be greatly appreciated!

Clarifications: imageCollection has many objects, but I will just pick one object for the carouselPhoto. There are three image properties names imageX, but there are also other properties such as "name"

Is imageCollection always an array with only one object? Are the properties always named imageX? — ShamPooSham
– ShamPooSham, Commented Aug 2, 2021 at 14:08
imageCollection has many objects, but I will just pick one object for the carouselPhoto. There are three image properties names imageX, but there are also other properties such as "name" — user16372363
– user16372363, Commented Aug 2, 2021 at 14:52

zr0gravity7 · Accepted Answer · 2021-08-02 15:07:43Z

1

You can simply retrieve the values from your imageCollection object, then map them to the desired format.

Object.values(state.imageCollection[0]).map(imgUrl => ({ image: imgUrl }));

EDIT

Since the object in your imageCollection array contains keys that should be ignored, we can first filter them out before mapping to the transformed result. We filter out keys that do not begin with the string "image", using Array.prototype.startsWith(). This means we also need to gather the keys from the object along with the values, so we use Object.entries():

Object.entries(state.imageCollection[0]).filter(([key, val]) => key.startsWith("image")).map(([key, val]) => ({ image: val}));

Try it out:

state = {
  imageCollection: [
    {
      name: "Pictures of birds",
      image1: "http://127.0.0.1:8000/media/image1A.jpg", 
      image2: "http://127.0.0.1:8000/media/image2A.jpg",
      image3: "http://127.0.0.1:8000/media/image3A.jpg"
    }
  ]
}

const result = Object.entries(state.imageCollection[0])
                .filter(
                  ([key, val]) => key.startsWith("image"))
                .map(
                  ([key, val]) => ({ image: val}));

console.log(result);

state.carouselPhotos = result;
console.log(state);

edited Aug 2, 2021 at 15:07

answered Aug 2, 2021 at 14:08

zr0gravity7

3,2801 gold badge16 silver badges38 bronze badges

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

4 Comments

user16372363 Over a year ago

Thanks for this! One slight issue: The array imageCollection contains other properties (such as name). I've since amended the question. However, there will only ever be three pictures.

zr0gravity7 Over a year ago

Is it safe to assume the keys of interest look like "imageX", where X is any number (e.g. 3, 07, 25)?

user16372363 Over a year ago

Yes, it is safe to assume that. I am actually pulling the data from a database, so it will be formatted exactly like that.

zr0gravity7 Over a year ago

In that case, see the edit. Please let me know if that works

brk · Accepted Answer · 2021-08-02 14:09:22Z

0

You can use reduce & inside the callback iterate the current object and create a new object for each image and push it to the accumulator array

const imageCollection = [{
  image1: "http://127.0.0.1:8000/media/image1A.jpg",
  image2: "http://127.0.0.1:8000/media/image2A.jpg",
  image3: "http://127.0.0.1:8000/media/image3A.jpg"
}]


const carouselData = imageCollection.reduce((acc, curr) => {
  for (let keys in curr) {
    acc.push({
      image: curr[keys]
    })
  }
  return acc;
}, []);

console.log(carouselData)

answered Aug 2, 2021 at 14:09

brk

50.3k10 gold badges59 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to push a string onto an array as a named object in javascript?

2 Answers 2

EDIT

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDIT

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related