Looping within const in ReactJS - reactjs

Question

This is really minimal... but I haven't been able to figure this out.
const compose_url = (id, key) =>
`${id}/image/_/${key}`;
const get_images = compose_url(
this.props.dataset_id, // pass in prefix (2018_1_25)
get_image_arrays // This returns an array with two arrays e.g. [["img1.png"], ["img2.png"]]
);
I want this to return "2018_1-25/img1.png" and "2018_1-25/img2.png", but I'm only getting that for the first array, ("2018_1-25/img1.png") not for the second one. How could I loop through this to add the prefix to both images?
Please help... I haven't found documentation or examples on how to do this.

Answer 1

You need to update compose_url() function here, and make sure you always pass array as second of the vairable.
const compose_url = (date, imageArray) =>
imageArray.map((eachImage) => `${id}/image/_/${eachImage}`);
hope this helps.

Answer 2

const get_images = [];
const { dataset_id: id } = this.props;
get_images_array.forEach(arr => {
arr.forEach(path => {
get_images.push(
compose_url(
id,
path
)
);
}
});
EDIT:
I took a different approach to other answers and instead of modifying the compose_url method, I worked off of the the given data. This approach iterates over the top level array (get_images_array) and then iterates over each of the arrays in get_images_array. For each path in the inner arrays, the result of compose_url is pushed onto the get_images result array.

Answer 3

try this.
const compose_url = (id, arr) => {
return arr.map((ar) => (
`${id}/image/_/${ar}`
));
};
This function will return [ "2018_1_25/image/_/img1.png", "2018_1_25/image/_/img2.png" ]

Answer 4

You can simply map over the array like
const compose_url = (id, arr) => {
return [].concat(arr.map(data => [].concat(data.map(key) => `${id}/${key}`)));
}
const get_images = compose_url(
this.props.dataset_id, // pass in prefix (2018_1_25)
get_image_arrays // This returns an array with two arrays e.g. [["img1.png"], ["img2.png"]]
);