Question 346638 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Increment a value inside a template literal in JS?

I’m trying to increment a number in a Template Literal in JS, but instead of incrementing the number, it’s printing it. Here’s the code:

Code:

function outputFAQResults(results) {
    
        if(results.faqs) {
            const gridClass = results.faqs.length > 1 ? "grid-2" : "grid-1";
            let count = 1 // Here's the number I want to increment in a map loop

            return `
        <div data-result-type="faqs" class="accordion">
            <h2 class="grid-item-heading gold-line">FAQ's</h2>
            <div class="search-results-section">
                <ul class="${gridClass} found-results list-reset">${results.faqs.map((item) => `
                    <li class="search-result search-result--faq" tabindex="0">
                        <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${count}" aria-expanded="false" aria-controls="faq-${count}">${item.question}</button></div>
                        <div id="faq-${count}" class="search-result__answer collapse">${item.answer}</div>
                    </li>`${count++}).join("")}
                </ul>
            </div>
        </div>`} else {
            return "";
        }
    }

As you can see, for every map, I’m trying to increase the count variable by one so I can use a Bootstrap Collapse. How can I use the variable without printing it?

Tags:

2

Answers


  1. 0

    If you want to increment the variable but not output it, don’t put it inside the template literal. Change the

    results.faqs.map((item) => `
  <li class="search-result search-result--faq" tabindex="0">
    <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${count}" aria-expanded="false" aria-controls="faq-${count}">${item.question}</button></div>
    <div id="faq-${count}" class="search-result__answer collapse">${item.answer}</div>
  </li>`${count++}
).join("")

    to

    results.faqs.map((item) => {
  const resultItem = `
    <li class="search-result search-result--faq" tabindex="0">
      <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${count}" aria-expanded="false" aria-controls="faq-${count}">${item.question}</button></div>
      <div id="faq-${count}" class="search-result__answer collapse">${item.answer}</div>
    </li>`;
  count++;
  return resultItem;
}).join("")

    However, as mentioned in the comments, there is no reason to have your own counter and increment it. Use the index that is passed as the second argument to your map callback:

    results.faqs.map((item, index) => {
//                      ^^^^^
  const count = index + 1;
  return `
    <li class="search-result search-result--faq" tabindex="0">
      <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${count}" aria-expanded="false" aria-controls="faq-${count}">${item.question}</button></div>
      <div id="faq-${count}" class="search-result__answer collapse">${item.answer}</div>
    </li>`;
}).join("")
    Login or Signup to reply.
  2. 0

    variable++ postfix unary operator result is the previous value of the operand which is definitely is printed by ${} template interpolation. Use ++variable, which returns incremented value, on the FIRST occurrence of a variable in a template:

    results.faqs.map((item) => `
  <li class="search-result search-result--faq" tabindex="0">
    <div class="search-result__question"><button data-toggle="collapse" data-target="#faq-${++count}" aria-expanded="false" aria-controls="faq-${count}">${item.question}</button></div>
    <div id="faq-${count}" class="search-result__answer collapse">${item.answer}</div>
  </li>`
).join("")
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search