Using split to seperate elements in an array, JavaScript

Question

I am seeking to create a table that will take an array with 3 items separated by commas and have them inserted in to a table. Currently my table either fails, or will present the items all grouped together. Under each heading I have one row each filled with "Madrid,Spain,3255944", "Santiago,Chile,4837295", "Lima,Peru,7737002" under the three headings of Country, Capital, Population, I would like 3 rows separated for each heading.

<html>
<head>
<title>  </title>
<meta charset="windows-1252">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
</head>
<body>

<table id="table" border="1">

<!-- The Row Number 0 -->
<tr>
<th>City</th>
<th>Country</th>
<th>Population</th>
</tr>

</table>

<script>

var array = [
["Madrid,Spain,3255944", "Santiago,Chile,4837295",
"Lima,Peru,7737002"],
        ],

var a = array.split(',')
a[0], a[1], a[2];
table = document.getElementById("table");



for(var i = 0; i < array.length; i++)
{
// create a new row
var newRow = table.insertRow(table.length);
for(var j = 0; j < array[i].length; j++)
{
// create a new cell
var cell = newRow.insertCell(j);

// add value to the cell
cell.innerHTML = array[i][j];


}
}
</script>

</body>
</html>

use @Barmar answer, and take care about your array declaration => var array = ["Madrid,Spain,3255944", "Santiago,Chile,4837295", "Lima,Peru,7737002"]; — Eduardo Martínez
– Eduardo Martínez, Commented Mar 13, 2018 at 22:46
why is var array a two-dimensional array of strings? Or better, is that intentional? — Thomas
– Thomas, Commented Mar 13, 2018 at 22:46

Barmar · Accepted Answer · 2018-03-13 22:42:20Z

2

You need to call split() on the strings in the array, not the array itself.

array.forEach(row => {
    cols = row.split(",");
    newRow = table.insertRow(table.length());
    cols.forEach(col => {
        var cell = newRow.insertCell(newRow.length);
        cell.innerHTML = col;
    });
});

answered Mar 13, 2018 at 22:42

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

Comments

Philip Warren · Accepted Answer · 2018-03-14 15:13:09Z

0

Barmars answer is certainly correct but beyond my ken, I do appreciate it. Another source provided the following which is slightly easier to grasp that worked for me beginner self. Below is more towards the use of a learner such as myself and I will correct it and provide the full code once I complete my task, great thanks for the gentleman taking his time and I shall seek to learn my about the syntax when time allows.

            var array = [
        "Madrid,Spain,3255944", "Santiago,Chile,4837295", "Lima,Peru,7737002"
    ];
    table = document.getElementById("table");

var x;
for (var i = 0; i < array.length; i++){

    <tr>
        x = arr[i];
    var pieces = array.split(',');
    <td> pieces[0] </td> 
    <td> pieces[1] </td>
    <td> pieces[2] </td>
</tr>;

        }

answered Mar 14, 2018 at 15:13

Philip Warren

33 bronze badges

2 Comments

Barmar Over a year ago

array.split(',') should be x.split(',')

Barmar Over a year ago

You can't mix HTML and Javascript like that.

Collectives™ on Stack Overflow

Using split to seperate elements in an array, JavaScript

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related