Converting CSV input in textarea to dynamic table

Question

This picture defines what I need

I want that the data I enter dynamically to be converted to table with each comma defining the column and the newline defining the new row.

Below is the code I have tried. Can I have a better approach to this problem?

 <script>
        function myFunction() 
                            {
 var x = document.getElementById("textarea").value.split(" ");         
  var customers = new Array();
    customers.push(x[0]);
    customers.push(x[1]);
    customers.push(x[2]);
   
   
    var table = document.createElement("TABLE");
    table.border = "1";
 
    //Get the count of columns.
    var columnCount = customers[0].length;
 
    //Add the header row.
    var row = table.insertRow(-1);
    for (var i = 0; i < columnCount; i++) {
        var headerCell = document.createElement("TH");
        headerCell.innerHTML = customers[0][i];
        row.appendChild(headerCell);
    }
 
    //Add the data rows.
    for (var i = 1; i < customers.length; i++) {
        row = table.insertRow(-1);
        for (var j = 0; j < columnCount; j++) {
            var cell = row.insertCell(-1);
            cell.innerHTML = customers[i][j];
        }
    }
 
    var dvTable = document.getElementById("dvTable");
    dvTable.innerHTML = "";
    dvTable.appendChild(table);

                            }           
 </script>

<html>
<head>
    <title>Player Details</title>
	
	</head>
	<body align = "center">
            <h3 align = "center"><b>Input CSV</b></h3>
            
           
            <p align = "center"><textarea rows="10" cols="50" name = "csv" id = "textarea"></textarea></p><br>
           
            <button type="button" id = "convert" onclick="myFunction()">Convert</button><br>
            <br>
            
               
            <div id = "team"></div>
            
	</body>
	</html>

@Deshant Please follow the link stackoverflow.com/a/36104178/1624893 — Waqas Ahmed
– Waqas Ahmed, Commented Jul 20, 2017 at 8:26
Please provide some code that you have used, to show that you have tried to solve this yourself. As others said, this is not a coding service. This could have been solved with a simple query at any given search engine of value. — NoLifeKing
– NoLifeKing, Commented Jul 20, 2017 at 8:34
why do you split your input by space (" ")? I don't see any space in your csv input.. If you want to get started I'd just split it by lines ("\n") and then comma (",") to get your columns and rows if you don't want to use any fancy JS lib. — xander
– xander, Commented Jul 20, 2017 at 8:41
@xander, Sir the var x will take all input as string separated by space for each new line. So to distinguish each newline i used split with (" "). — Deshant
– Deshant, Commented Jul 20, 2017 at 8:43

Taleeb · Accepted Answer · 2017-07-20 09:02:40Z

You need to split the data first using newline (\n) and then using comma (,) character. The table can be created as string and finally inserted to the correct div.

Refer the code below to get you started.

function myFunction() {
      var tbl = "<table class='table table-responsive table-bordered table-striped'><tbody>"
      var lines = document.getElementById("textarea").value.split("\n");
      for (var i = 0; i < lines.length; i++) {
        tbl = tbl + "<tr>"
        var items = lines[i].split(",");
        for (var j = 0; j < items.length; j++) {
          tbl = tbl + "<td>" + items[j] + "</td>";
        }
        tbl = tbl + "</tr>";
      }
      tbl = tbl + "</tbody></table>";
      var divTable = document.getElementById('team');
      console.log(tbl);
      divTable.innerHTML = tbl;


    }

I've used bootstrap for css, you may want to use your own (or not).

Refer jsFiddle here.

esenkaya · Accepted Answer · 2023-05-12 17:00:40Z

0

You can use textarea to paste tab separated data to create JSON. Let's say your data have four columns without header.

$("#textarea_id").on("change", function () {
var header = ["Key1", "Key2", "Key3", "Key4"];
var rows = $(this).val().split("\n");
var jsonRaw = "[";
for (i = 0; i < rows.length; i++) {
  var row = rows[i].split("\t");
  jsonRaw += "{";
  for (n = 0; n < row.length; n++) {
    jsonRaw += '"' + header[n] + '":"' + row[n] + '"';
    if (n < row.length - 1) {
      jsonRaw += ",";
    }
  }
  jsonRaw += "}";
  if (i < rows.length - 1) {
    jsonRaw += "," 
  };
}
jsonRaw += "]";
var json = JSON.parse(jsonRaw);
  console.log(json);
})

answered May 12, 2023 at 17:00

esenkaya

4783 silver badges5 bronze badges

Collectives™ on Stack Overflow

Converting CSV input in textarea to dynamic table

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related