JSFiddle - React, Tailwind, and code Playground

by Stephen Katulka

HTML

<textarea class="myText" rows="20" cols="80">"this","is",3,"right?"
"isn't","this",1,"OK?"
"this \"line\"","contains",2,"quotes"</textarea>
<input type="button" class="action" value="OK"/>
<div class="result"></div>

CSS

div.result {
    width:150px;
    height:100px;
    border:1px solid black;
}

JavaScript

var pivot = function(data){
    var result = [];
    for (var i = 0; i < data.length; i++){
        for (var j=0; j < data[i].length; j++){
            if (j === 0){
                result[j] = [];
            }
            result[j][i] = data[i][j];
        }
    }
    return result;
};

var getData = function() {
    var csvString = $(".myText").text();
    var csvLines = csvString.split("\n");
    
    var dataTable = [];
    
    for (var i = 0; i < csvLines.length; i++){
        //var line = csvLines[i].replace(/"/g,"\\\""); // Fix quotes for eval()
        var values;
        eval("values = [" + csvLines[i] + "]");
        dataTable[i] = values;
    }
    
    return pivot(dataTable);
}

$(".action").on("click",function(){
    $(".result").html("<p>Results:</p><p>" + getData() + "</p>");      
});