How do I insert array items, parsed with forEach, into a string, using JavaScript?

Question

I have an array with values that I want to dynamically insert into a string that, in turn, is part of an innerHTML string. I have worked out how to parse the array items using forEach but I can't work out how to take the values forEach returns and insert them into the string.

The purpose of this is to replace the following, very inefficient, code (you can ignore the fact that the current code uses iframe, it isn't directly relevant to my question):

let container = document.querySelector('.container');
let btnLoad50 = document.getElementById('btn50');
let btnLoad51 = document.getElementById('btn51');
let btnLoad53 = document.getElementById('btn53');

btnLoad50.addEventListener('click', function( btnFunc ) {
  container.innerHTML = '<iframe src="pages/_route50.php" title="Route 50" width="900px" height="900px">';
})

btnLoad51.addEventListener('click', function( btnFunc ) {
  container.innerHTML = '<iframe src="pages/_route51.php" title="Route 51" width="900px" height="900px">';
})

btnLoad53.addEventListener('click', function( btnFunc ) {
  container.innerHTML = '<iframe src="pages/_route53.php" title="Route 53" width="900px" height="900px">';
})

The underlying HTML that I am targeting is this:

<p>Some unrelated text.</p>

  <div class="btn_div">
      <button name="load" class="btn">Click This</button>
    </div>

  <div class="container">
    <p>Something will be added here</p>
  </div>

This is what I've come up with so far:

This part works from the perspective that it parses the array using the forEach method and logs out a correctly iterated list of items in the console:

const rList = [50, 51, 53];
const btn = document.querySelector('.btn');
const container = document.querySelector('.container');

const routes = rList.forEach(e => console.log(`This is btn${e}`));

The following section gives me a ul list when I click the button but the content of each item is This is route btnundefined instead of This is route btn50, This is route btn51, etc:

btn.addEventListener('click', function() {
  container.innerHTML = `
      <ul>
        <li>This is route btn${routes}</li>
        <li>This is route btn${routes}</li>
        <li>This is route btn${routes}</li>
      </ul>`;
});

How can I bring it all together here? My desired outcome is the following:

Parse the array, return the items in the array as values;
Pass the items to my eventListener function, creating a ul list in the container element in my page with incremented btn + item strings.

I'm looking for a vanilla JavaScript solution here. While I appreciate help from JQuery pros, I'm not using JQuery for this.

Andrzej Smyk · Accepted Answer · 2017-10-06 14:15:26Z

1

forEach always returns undefined.Iif you want to return array of values you have to use map:

const rList = [50, 51, 53];
const routes = rList.map(e => `This is btn${e}`);

console.log(routes);

or use forEach but do sth like:

const rList = [50, 51, 53];
let routes = []
rList.forEach(e => routes.push(`This is btn${e}`));
console.log(routes);

When you have routes populated render data on click using map again:

const rList = [50, 51, 53];
const routes = rList.map(e => `This is btn${e}`);
const btn = document.querySelector('.btn');
const container = document.querySelector('.container');


btn.addEventListener('click', function() {
  container.innerHTML = `
    <ul>
      ${routes.map(route => `<li>${route}</li>`).join('')}
    </ul>`;
});

<p>Some unrelated text.</p>

<div class="btn_div">
    <button name="load" class="btn">Click This</button>
  </div>

<div class="container">
  <p>Something will be added here</p>
</div>

EDIT: as request by OP in comment. I would use forEach this way, but in this case I really do think that map works jus better. I rarely use forEach or naked for loops for data transforamtion. If ind map, filter and reduce superior in cases like this.

btn.addEventListener('click', function() {
  let htmlString = `<ul>`;
  routes.forEach(route => htmlString +=`<li>${route}</li>`);
  htmlString += </ul>`;
  container.innerHTML = htmlString;
});

edited Oct 6, 2017 at 14:15

answered Oct 6, 2017 at 12:45

Andrzej Smyk

1,72411 silver badges21 bronze badges

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

7 Comments

Paul Jacobson Over a year ago

I'm not sure that gets me closer to my goal of taking those array items/values and inserting them into my innerHTML strings, though? Any suggestions there?

Paul Jacobson Over a year ago

Ok, great. I clearly misunderstood the map method and how I was using forEach. So, in your code, the routes variable now contains the dynamic string?

Paul Jacobson Over a year ago

Would you mind clarifying what is happening in this line for me? I'm not sure I understand it fully: ${routes.map(route => <li>${route}</li>).join('')}

Andrzej Smyk Over a year ago

Using array of routes (route) you create another array of li strings and then you join them to get one string, which finally is put in your innerHtml string.

Andrzej Smyk Over a year ago

Does anything else need clarification? Does this answer help you?

|

Collectives™ on Stack Overflow

How do I insert array items, parsed with forEach, into a string, using JavaScript?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related