Displaying a javascript variable array

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?

• Taki: use res.join() instead of res.toString()
• getl0st: You can loop trought the array and display it on the table
• mbadeveloper: Can you provide the html code for 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, 'R.P 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>

• Goraby: Thank you it's working, how can I separate the elements (id,station and line) into rows and make the list go vertically instead of horizontally ?
• Taki: i can't tell how you can seperate them without seeing the array you're working with

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?