Looping within const in 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.

What does compose_url() do? what are you expecting in get_images variable? — mindaJalaj
– mindaJalaj, Commented Apr 30, 2018 at 16:44
@mindaJalaj compose_url() is a function that takes in two parameters to compose a URL (dataset_id, image_key) => ${dataset_id}/image/_/${image_key}; ` In this case, I want get_images to add the first parameter to both arrays... not just one — Gorgorita32 Gorgorita
– Gorgorita32 Gorgorita, Commented Apr 30, 2018 at 16:48
get_image_arrays are always separated array like two array ` ["img1.png"] ["img2.png"]` three array ` ["img1.png"] ["img2.png"] ["img2.png"]`. is it? Please, console your get_image_arrays before passing and edit your question with the console data. — Ikram Ud Daula
– Ikram Ud Daula, Commented Apr 30, 2018 at 16:52
Sorry... correction it's an array with two arrays inside: [["img1.png"], ["img2.png"]]. I corrected my question to reflect this. — Gorgorita32 Gorgorita
– Gorgorita32 Gorgorita, Commented Apr 30, 2018 at 16:56

mindaJalaj · Accepted Answer · 2018-04-30 17:06:43Z

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.

answered Apr 30, 2018 at 17:06

mindaJalaj

4483 silver badges11 bronze badges

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

Comments

Anthony · Accepted Answer · 2018-04-30 22:03:27Z

1

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.

edited Apr 30, 2018 at 22:03

answered Apr 30, 2018 at 16:59

Anthony

6,5122 gold badges20 silver badges36 bronze badges

1 Comment

crizzis Over a year ago

Could you please comment on how the solution works? Posting the code only does not amount to an answer

Ikram Ud Daula · Accepted Answer · 2018-04-30 17:22:43Z

0

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" ]

edited Apr 30, 2018 at 17:22

answered Apr 30, 2018 at 17:00

Ikram Ud Daula

1,33116 silver badges24 bronze badges

Comments

Shubham Khatri · Accepted Answer · 2018-04-30 17:02:20Z

0

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"]]
  );

answered Apr 30, 2018 at 17:02

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Collectives™ on Stack Overflow

Looping within const in ReactJS

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related