Get nested array items to append to new column in HTML Table

Question

I'm trying to append items from a 2D array into a table, but everything is appearing in the one column on the left. How can I separate tableDataArr[1] to start loading into the next column across?

Javascript

let names = []; //populated dynamically
let language = []; //populated dynamically 
let tableDataArr = [names, language];

function renderData() {
  for (let i = 0; i < tableDataArr.length; i++) {
    tableDataArr[i].forEach(j => {
      let newRow = document.createElement("tr");
      newRow.className = "row";
      newRow.innerHTML = `<td class='cell'>${j}</td>`;
      leftTable.appendChild(newRow);
    });
  }
}

HTML

<div class='left-tbl-wrap'>
  <table class='table' id='left-table'>
    <tr class='row'>
      <th class='th'>Name</th>
      <th class='th'>Language</th>
      <th class='th'>Latest tag</th>
      <th class='th'><span class='delete'></span></th>
    </tr>
  </table>
</div>

Chris Li · Accepted Answer · 2018-09-14 02:09:24Z

2

For each iteration add name and language to the same row, then insert that row into table.

I added some elements in names and languages array to demostrate

let names = ["name1", "name2", "name3"]; //populated dynamically
let language = ["language1", "language2", "language3"]; //populated dynamically 
let tableDataArr = [names, language];
const leftTable = document.querySelector("#left-table");

function renderData() {
  tableDataArr[0].forEach((j, i) => {
    let newRow = document.createElement("tr");
    newRow.className = "row";
    newRow.innerHTML = `<td class='cell'>${j}</td><td class='cell'>${tableDataArr[1][i]}</td>`;
    leftTable.appendChild(newRow);
  });
}

renderData();

<div class='left-tbl-wrap'>
  <table class='table' id='left-table'>
    <tr class='row'>
      <th class='th'>Name</th>
      <th class='th'>Language</th>
      <th class='th'>Latest tag</th>
      <th class='th'><span class='delete'></span></th>
    </tr>
  </table>
</div>

answered Sep 14, 2018 at 2:09

Chris Li

2,6711 gold badge11 silver badges24 bronze badges

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

5 Comments

Lauren Over a year ago

Thanks so much! This is exactly what I was trying to achieve. Also, can I ask why you changed getElementByID to querySelector?

Chris Li Over a year ago

i didnt see how you where selecting the table, im just more used to using query selector thats all

Lauren Over a year ago

Hey Chris, would you mind taking a look at my latest post (about another problem with this table), since you helped me work out this one? Cheers!! stackoverflow.com/questions/52359079/…

Chris Li Over a year ago

it seems like you already have a decent answer by miozzz, i would have suggested the same solution. You could also use async/await, but since you have a loop of fetch, using Promise.all has better performance. He did make a minor mistake, just change Promise.all(ps) to Promise.all(psArr) and it worked for me.

Lauren Over a year ago

Thanks Chris! Promise.all was the way to go.

Toan Tran · Accepted Answer · 2018-09-14 02:02:48Z

0

It should be like that

function renderData() {
    for (let i = 0; i < tableDataArr.length; i++) {
      let newRow = document.createElement("tr");
      tableDataArr[i].forEach(j=> {
        newRow.className = "row";
        newRow.innerHTML = `<td class='cell'>${j}</td>`;
        leftTable.appendChild(newRow);
      });
    }
}

Because you may do not need to iterate table row in the second loop. If you do like that it will be add each row with only one table data.

answered Sep 14, 2018 at 2:02

Toan Tran

2,0673 gold badges25 silver badges39 bronze badges

1 Comment

Lauren Over a year ago

Hmm this helped get the language array into the next column, but it only worked for the last item of name and language. How can I have all items from the array listed this way? Thanks for your help

Collectives™ on Stack Overflow

Get nested array items to append to new column in HTML Table

2 Answers 2

5 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related