show js array in html table

Question

I have a javascript array and I want to show parts of it in HTML.

For example what html code would I use in the body to show a table of just the info from QR4 - the number and the country? There are other parts to the array so to show the whole QR4 array would be fine, but Id also like to know how to select specific parts

QR4[25] = "China";
QR4[24] = "39241000";
QR8[25] = "China";
QR8[24] = "39241000";
QR8L[25] = "China";
QR8L[24] = "39241000";
QR4L[25] = "China";
QR4L[24] = "39241000";

I have this code making a table in php using csv which works fine but I want it client side, not server side. A table like this would be fine...

<?php
echo "<table>\n\n";
$f = fopen("csv.csv", "r");
while (!feof($f) ) {
 echo "<tr>";
 $line_of_text = fgetcsv($f);
 echo "<td>" . $line_of_text[10] . "</td>";
 echo "<tr>\n";
}
fclose($f);
echo "\n</table>";
?>

• Edgar: Just a note, you have several arrays in the example, not just one. And from what I understand, you want to show all the elements of the QR4 array?
• Pointy: What do you want the table to look like? Can you type in by hand a sample?
• Incognito: Arrays: You're doing it wrong. Variable names: You're doing it wrong. Fix these two and come play again.
• Jon: I made an array from a csv. Whats the best way to get this showing client side? Im not stuck on arrays or var names but that seemed to be the suggested way to do this...

Answer 1

Here is a really simple example of how you could do it.

Check this fiddle.

You have to pass an array to the function displayArrayAsTable(). You can then specify the range of the array to insert into the table, for example from 24 to 25 like you asked, otherwise all the array will be processed.

The function will return a table element you can then append where you find more appropriate, or tweak the function so that will always insert it for you where you want.

• Jon: This is pretty great! If I wanted to produce the data as <tr><td>DATA</td></tr> - whats the best way to alter the code?
• Jose Faeti: This will give you only a row with the data of the array inside a string, without creating any element. Check this.
• Jon: I have a vertical table with the headings. I want to insert data using the array. The best way I guess would be to add td's to the original table. But It may be easier to just make a new table. I think I see in the code where the table tags are coming from so I think I could take these out or in. But I didnt have much luck with the tr... thanks
• Jose Faeti: If you already have a table, then the best would be to create only a new row with the array data, like in this example.
• Jon: that is lovely!! How would I append to a table like this? <table id="mytable"> <tr> <td>Number</td> </tr> <tr> <td>Country</td> </tr> </table>

Answer 2

To show all rows of the QR4 array in a HTML table use this:

<table>
 <tr>
 <th>ID</th>
 <th>City</th>
 </tr>
 <script type="text/javascript">
 for(id in QR4)
 {
 document.write('<tr><td>' + id + '</td><td>' + QR4[id] + '</td></tr>');
 }
 </script>
</table>

To show specific elements from the Javascript array in a HTML table use this:

<table>
 <tr>
 <th>Number</th>
 <th>City</th>
 </tr>
 <script type="text/javascript">
 document.write('<tr><td>' + QR4[24] + '</td><td>' + QR4[25] + '</td></tr>');
 </script>
</table>

As I suspect you want to combine the QR[24] and QR[25] elements in one row, that's what I did in my second code sample. But if that's the situation, your array structure isn't very logical.

I gave you the code samples to select data from Javascript arrays and put them in HTML tables, now it's on you to use it the way you need it.. Because that isn't clear to me at all..

• Jon: which id's are to be changed? all or some?
• kevindh89: I don't understand your question, but I have edited my post with some more information.
• Jon: Thats excellent manipulation! Thanks. So is the other code - for([24]) { document.write('<tr><td>' + id + '</td><td>' + QR4[id] + '</td></tr>'); }
• Jose Faeti: document.write is really a bad way of inserting content into the DOM, you should use createElement and appendChild instead.
• kevindh89: Imo you should use a Javascript library to do such things, but I did it this way with the hope of him understanding the way looping and reading array data works in Javascript.

Answer 3

Assuming you already have the table defined, you can use some simple DOM methods to add and delete rows.

var table = document.getElementById("mytable");
for(i=0; i < QR4.length;i++) {
 var row = table.insertRow(table.rows.length);
 var cell = row.insertCell(0);
 cell.innerHTML = QR4[i];
}

• Jon: when I run this I get the numbers 24 and 25 as new <tr> at the bottom of the table. How do I out put the data rather than array number, and I would rather the data as a second column in the table rather than a second row - so the data is vertical. I guess I didnt realise thsi when I asked the q...
• Jon: Is there a way to integrate it as adding a column to the existing table. I was working with this code but it adds the columns empty. i; for (i = 0; i < tbl.rows.length; i++) { createCell(tbl.rows[i].insertCell(tbl.rows[i].cells.length), i, 'col')
• Ed Manet: var cell = row.insertCell(columnNumber); so for the first column, it's insertCell(0), the second column is insertCell(1), third column is insertCell(2), etc.
• Jon: Thats really good. But again its adding the array as its own row so it works horizontally with the fixed data. I want each entry of the array to be added to the same row as the title, so the table shows vertically. When I play around the code I cant make it work. I updated the fiddle... The html would start as Row 1 row 2 row 3 instead of col 1 col 2 col3 ...