Change object key and assign into new object-CodePudding

I'm getting this data from an API.

[
    {
        "aspect_ratio": 0.667,
        "height": 1160,
        "iso_639_1": null,
        "file_path": "/728rlT3uW8qzXSxa0sWGhkOvE7X.jpg",
        "vote_average": 5.388,
        "vote_count": 4,
        "width": 774
    },
    {
        "aspect_ratio": 0.667,
        "height": 1381,
        "iso_639_1": null,
        "file_path": "/4L8UmlXVoJ3rOmkkkjcGE0XsCEz.jpg",
        "vote_average": 5.322,
        "vote_count": 5,
        "width": 921
    }

]

I want to make a new object images which should look like this

[
    {
        "original": [
            "https://image.tmdb.org/t/p/original//728rlT3uW8qzXSxa0sWGhkOvE7X.jpg"
        ],
        "thumbnail": [
            "https://image.tmdb.org/t/p/w500//728rlT3uW8qzXSxa0sWGhkOvE7X.jpg"
        ]
    },
    {
        "original": [
            "https://image.tmdb.org/t/p/original/4L8UmlXVoJ3rOmkkkjcGE0XsCEz.jpg"
        ],
        "thumbnail": [
            "https://image.tmdb.org/t/p/w500/4L8UmlXVoJ3rOmkkkjcGE0XsCEz.jpg"
        ]
    }
]

I tried to map the obtained result with fullSizeImg and halfSizeImg using

    const fullSize = pics.map(({ file_path }) => ([fullSizeImg   file_path]))
    const halfSize = pics.map(({ file_path }) => ([halfSizeImg   file_path]))

where "original" comes from const fullSizeImg = "https://image.tmdb.org/t/p/original"; and "thumbnail" from const halfSizeImg = "https://image.tmdb.org/t/p/w500";

Now, I'm stuck in mapping two of them together to get the desired result

CodePudding user response：

Try this

const data = [
  { "aspect_ratio": 0.667, "file_path": "/728rlT3uW8qzXSxa0sWGhkOvE7X.jpg", "width": 774 },
  { "aspect_ratio": 0.667, "file_path": "/4L8UmlXVoJ3rOmkkkjcGE0XsCEz.jpg", "width": 921 }
];

const imageBaseUrl = 'https://image.tmdb.org/t/p/original/';
const thumbnailBaseUrl = 'https://image.tmdb.org/t/p/w500/';

const mapped = data.map(({ file_path }) => {
  return {
    original: [imageBaseUrl   file_path],
    thumbnail: [imageBaseUrl   file_path]
  };
});

console.log(mapped);

CodePudding user response：

Since they're of the same length, you could map over one of them and use the index for the other:

const fullSize = pics.map(({ file_path }) => ([fullSizeImg   file_path]))
const halfSize = pics.map(({ file_path }) => ([halfSizeImg   file_path]))

const result = fullSize.map((fs, i) => ({ original: fs, thumbnail: halfSize[i] }));

Alternatively, do it in one go from the start:

const result = pics.map(({ file_path }) => ({
    original: [fullSizeImg   file_path],
    thumbnail: [halfSizeImg   file_path],
}));

CodePudding user response：

Why split them into multiple arrays just to put them back together? Just do it all in one:

const result = pics.map(({ file_path }) => {
  const original = [fullSizeImg   file_path];
  const thumbnail = [halfSizeImg   file_path];
  return { original, thumbnail };
});