显示一个JavaScript变量数组

Question

I have a variable array that results in a table filtering depending on the user input. I get the array result in a console.log now I want to display it in HTML.

I tried : document.getElementById("Tableau").innerHTML = res.toString();

where "res" is the array result, but that only shows elements separated with commas when I want to have a somewhat well presented simple HTML table.

var res = station.filter( i => i[0] >= gval1 && i[0] <= gval2 );
document.getElementById("Tableau").innerHTML = res.toString();
console.log(res);

This is the HTML table :

<table>
<thead>
    <tr>
        <th> Id </th>
        <th> Station </th>
        <th> Line </th>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>   
</tbody>
</table>

This is my javascript table :

var station = [
[0,'JAMAA EL FNA','L1'],
[1,'KOUTOUBIA','L1'],
[2,'HOTEL DE VILLE','L1'],
[3,'R.P BERDII','L1'],
[4,'GRAND POSTE','L1'],
[5,'CAREE EDEN','L1'],
[6,'PL ABDELMOUMEN','L1'],
[7,'PLACE D ARMES','L1'],
[8,'FST','L1'],
[9,'SEMIRAMIS','L1'],
[10,'DR KUDIA','L1'],
[11,'MCDO','L1'],
[12,'CAFE AMINE','L1'],
[13,'FAC SEMLALIA','L1'],
[14,'ROUIDATE','L1'],
[15,'CLUB MINISTRE JUSTICE','L1'],
[16,'BEN TBIB','L1'],
[17,'ASWAK SALAM','L1'],
[18,'BAB DOUKALA','L1'],
[19,'JAMAA EL FNA','L2'],
[20,'KOUTOUBIA','L2'],
[21,'PH KOUTOUBIA','L2'],
[22,'RIAD SHEBA','L2'],
[23,'DAR LBACHA','L2'],
[24,'RIAD LAAROUSSE','L2'],
[25,'BAB TAGHZOUT','L2'],
[26,'BIN LMAASAR','L2'],
[27,'ARSET EL MELLAK','L2'],
[28,'HOPITAL ANTAKI','L2'],
[29,'AVENUE ANTAKI','L2'],
[30,'QCHICH','L2'],
[31,'RUE BAB KHACHICH','L2'],
[32,'AIN ITTI','L2']];

How can I loop through the array to display it on the table?

Answer 1

use .join() to construct your html and put the array elements in td tags :

 const res = ['a', 'b', 'c']; const cells = '<tr><td>' + res.join('</td><td>') + '</td></tr>' ; document.getElementById("Tableau").innerHTML = cells; 

 td{ border: 1px solid; padding: 5px; } 

 <table id="Tableau"> </table> 

EDIT : based on the edited question, you'll need a loop to go through the array eleemnts and wrap each line in a <tr> and append the result to the <tbody> , use .map() for this :

 var station = [ [0, 'JAMAA EL FNA', 'L1'], [1, 'KOUTOUBIA', 'L1'], [2, 'HOTEL DE VILLE', 'L1'], [3, 'RP BERDII', 'L1'] ] var rows = station.map(e => { return '<tr><td>' + e.join('</td><td>') + '</td></tr>'; }) document.getElementById("tBody").innerHTML = rows.join(' '); 

 th, td { border: 1px solid; padding: 5px; } 

 <table id="Tableau"> <thead> <tr> <th> Id </th> <th> Station </th> <th> Line </th> </tr> </thead> <tbody id="tBody"> </tbody> </table> 

Answer 2

Rendering HTML with JavaScript is fun

Since you have a list and you need to make the delimiter table like, I would suggest inserting a <br /> tag between table items. Like so:

Tableau.innerHTML = res.join('<br />')

Answer 3

As Taki mentioned you can use res.join() to covert array into a string.

Speaking about styling it, may be the following would help.

Assuming you have an array as follows,

var statements=['1st statement','2nd statement','3rd statement','4th statement','5th statement'];
    console.log(statements.join('-'));

would yield the following

1st statement-2nd statement-3rd statement-4th statement-5th statement

and say you do the following

var styledRes ='<tr class="your-class-name"><td>' + statements.join('</td><td>')+' </td></tr>'

would yield

<tr class="your-class-name">
 <td>1st statement</td>
 <td>2nd statement</td>
 <td>3rd statement</td>
 <td>4th statement</td>
 <td>5th statement</td>
</tr>

And you can do your style definitions in your css file and they will get applied here.

When you do

document.getElementById("Tableau").innerHTML = styledRes;

you would see something like the following on screen

<table>
   <tr class="your-class-name">
     <td>1st statement</td>
     <td>2nd statement</td>
     <td>3rd statement</td>
     <td>4th statement</td>
     <td>5th statement</td>
    </tr>
</table>

And assume you have styles defined as follows,

.your-class-name td{

border:2px solid green; }

you would be able to see something like the following on screen

 .your-class-name td{ border:2px solid green; } 

 <table> <tr class="your-class-name"> <td>1st statement</td> <td>2nd statement</td> <td>3rd statement</td> <td>4th statement</td> <td>5th statement</td> </tr> </table> 

Is this what you are looking for?