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?

use res.join() instead of res.toString()

Taki
– Taki

2018-07-04 10:44:35 +00:00
Commented Jul 4, 2018 at 10:44 — Taki
– Taki, Commented Jul 4, 2018 at 10:44
You can loop trought the array and display it on the table

getl0st
– getl0st

2018-07-04 10:46:13 +00:00
Commented Jul 4, 2018 at 10:46 — getl0st
– getl0st, Commented Jul 4, 2018 at 10:46
Can you provide the html code for the table

mbadeveloper
– mbadeveloper

2018-07-04 10:49:51 +00:00
Commented Jul 4, 2018 at 10:49 — mbadeveloper
– mbadeveloper, Commented Jul 4, 2018 at 10:49

Taki · Accepted Answer · 2018-07-04 21:12:37Z

3

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>

edited Jul 4, 2018 at 21:12

answered Jul 4, 2018 at 10:51

Taki

17.7k5 gold badges28 silver badges48 bronze badges

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

2 Comments

Goraby Over a year ago

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 Over a year ago

i can't tell how you can seperate them without seeing the array you're working with

andria_girl · Accepted Answer · 2018-07-04 10:49:15Z

0

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 />')

answered Jul 4, 2018 at 10:49

andria_girl

5,1053 gold badges28 silver badges41 bronze badges

Comments

kathikeyan A · Accepted Answer · 2018-07-04 11:18:35Z

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?

Collectives™ on Stack Overflow

Displaying a javascript variable array

3 Answers 3

2 Comments

Rendering HTML with JavaScript is fun

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Rendering HTML with JavaScript is fun

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related