Using Map and Sort to show the objects that contains URL of images with the timestamps

Question

I'am studying firebase and using react, and right now I just stopped in this code:

{photos.map(url => (
        <div key={url} style={card}>
          <img src={url} style={image} />
          <div
            style={{
              margin: '10px',
              display: 'grid',
              gridTemplateColumns: '20px 1fr',
              gridGap: '20px',
              alignItems: 'center',
            }}
          >
            <div
              onClick={() =>
                favoritesURLs.includes(url)
                  ? unfavorite(url)
                  : favorite(url)
              }
            >
              <Icon
                type='star'
                size={20}
                strokeWidth={1}
                fill={favoritesURLs.includes(url)}
              />
            </div>
          </div>
        </div>
      )).sort(photos.timestamp)}

The photos object is something like this:

["https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2", 1585587393344, "https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e", 1585587393351, "https://firebasestorage.googleapis.com/v0/b/d42de0a22961", 1585587393369]

The images are showing, just like the timestamps hahahahahaha How can I show just the images using the timestamp to sort?

timestamp is in the SRC on the img tag! So, in every image that I'am showing, there is a img below that the src is the timestamp! — Vyse Clown, Apr 02 '20 at 14:43

Varooneh · Accepted Answer · 2020-04-02T15:03:39.843

Photos array hasn't key named [timestamp]. I think you need javascript object like this:

const photos = [
  {
    imgUrl: 'https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2', 
    timespan: '1585587393344'
  },
  {
    imgUrl: 'https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e', 
    timestamp: '1585587393351'
  }
]

In map you can use:

{photos.map(item => {
        return
        <div key={item.imgUrl} style={card}>
          <img src={item.imgUrl} style={image} />
          <div
            style={{
              margin: '10px',
              display: 'grid',
              gridTemplateColumns: '20px 1fr',
              gridGap: '20px',
              alignItems: 'center',
            }}
          >
            <div
              onClick={() =>
                favoritesURLs.includes(item.imgUrl)
                  ? unfavorite(item.imgUrl)
                  : favorite(item.imgUrl)
              }
            >
              <Icon
                type='star'
                size={20}
                strokeWidth={1}
                fill={favoritesURLs.includes(item.imgUrl)}
              />
            </div>
          </div>
        </div>
      }).sort(photos.timestamp)}

For sort by property visit this link Javascript array sort by property

I hope this helps you.

Francois Carstens · Answer 2 · 2020-04-07T13:43:00.500

Assuming your photos data is coming in an array, like you're suggesting, you could use a reduce function to build a proper object.

Assuming data is:

const pics = ["https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2", 1585587393344, "https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e", 1585587393351, "https://firebasestorage.googleapis.com/v0/b/d42de0a22961", 1585587393369]

Your function would look like this:

// grab all the pics urls
const urls = pics.filter((pic, i) => i % 2 === 0);
// grab all the timestamps
const timestamps = pics.filter((pic, i) => i % 2 === 1);

// combine them into an array of photo objects
const photos = urls.reduce(
  (a, c, i) => [...a, { imgUrl: c, timestamp: timestamps[i] }],
  []
);

Result should be:

[
  {imgUrl:"https://firebasestorage.googleapis.com/v0/b/0e0f89095ff2", timestamp: 1585587393344},
  {imgUrl:"https://firebasestorage.googleapis.com/v0/b/ad8c81e0798e", timestamp: 1585587393351},
  {imgUrl:"https://firebasestorage.googleapis.com/v0/b/d42de0a22961", timestamp: 1585587393369}
]

This should give you the object you need to sort according to @Varooneh's answer.

Using Map and Sort to show the objects that contains URL of images with the timestamps

2 Answers2