Creating string values from for loop

Question

Slightly strange question, but I have a for loop that loops through, and builds a list:

function buildList(jsonList) {
  var list = "<tbody>";
  for (i = 0; i < jsonList.length; i++) {
    list += "<ul class ='list'>";
    list += "<li>" + jsonList[i].keyNumber + "</li>";
    list +=
      "<li>" +
      "<button type='button' class='btn' onclick='deleteRow(this)'>" +
      "Remove" +
      "</button>" +
      "</li>";
    list += "</ul>";
  }
  list += "</tbody>";
  document.getElementById("htmlList").innerHTML = list;
}

Is there anyway I can pass the jsonList[i].keyNumber value to inside my onlick function inside my button?

onclick= 'deleteRow(this, jsonList[i].keyNumber)'.

That way, deleteRow will know which list to delete.

I would like to keep the above format and not use Jquery.
I need the ID, sending it to an API

`` html tag inside html table. why is there one arounf a '
` `
` ? this is illogical! — Mister Jojo, Feb 16 '20 at 23:51

Amine Ramoul · Answer 1 · 2020-02-17T00:00:50.700

try this:

onclick="this.parentNode.parentNode.removeChild(this.parentNode)"

in javascript you can only remove a child so you must select the parent of the element you want to remove and then you can delete the child. in your example : this // is the button this.parentNode // is Li this.parentNode.parentNode // is ul when you have the ul you can delate your element 'li' .

score 0 · Answer 2 · answered Feb 16 '20 at 23:53

To keep your current format, you'll have to concatenate the HTML string with the current keyNumber:

list +=
  "<li>" +
  "<button type='button' class='btn' onclick='deleteRow(" + jsonList[i].keyNumber + ")'>" +
  "Remove" +
  "</button>" +
  "</li>";
list += "</ul>";

Also, tbodys should not have ul children. Maybe create just a plain container instead, like a div, and use a template literal instead, for better readability:

function buildList(jsonList) {
  var list = "<div>";
  for (const { keyNumber } of jsonList) {
    list += `
      <ul class ='list'>";
        <li>${keyNumber}</li>";
        <li>
          <button type='button' class='btn' onclick='deleteRow(${keyNumber})'>Remove</button>
        </li>
      </ul>
    `;
  }
  list += "</div>";
  document.getElementById("htmlList").innerHTML = list;
}

But inline handlers have many problems and should be avoided whenever possible. If feasible, consider creating the elements with document.createElement and then adding the listener with addEventListener instead:

function buildList(jsonList) {
  const div = document.getElementById("htmlList").appendChild(document.createElement('div'));
  for (const { keyNumber } of jsonList) {
    const ul = div.appendChild(document.createElement('ul'));
    ul.className = 'list';
    ul.innerHTML = `
      <li>${keyNumber}</li>";
      <li>
        <button type='button' class='btn' onclick='deleteRow(${keyNumber})'>Remove</button>
      </li>
    `;
    ul.querySelector('button').addEventListener('click', () => deleteRow(keyNumber));
  }
}

score 0 · Answer 3 · answered Feb 17 '20 at 00:04

0

function buildList(jsonList) {
let list = `<tbody>`;
for (i = 0; i < jsonList.length; i++) {
    list += `<ul class ='list'>
  <li> ${jsonList[i].keyNumber} </li>
  <li>
    <button type='button' class='btn' onclick='deleteRow(this)'>
    Remove
    </button>
    </li>
    </ul>`;
}
list += `</tbody>`;
document.getElementById("htmlList").innerHTML = list;}

Should work.

answered Feb 17 '20 at 00:04

Lexan Flowers

1
1
3

Basically you can use template strings with the back text symbol ` to handle text along with variables. – Lexan Flowers Feb 17 '20 at 00:09

Creating string values from for loop

3 Answers3