Question

I am a beginner in jquery so this may be stupid.
I want to take csv data from the user and transform it into json. Found a nice library but don’t quite understand how the submitting is done in jquery.

For instance if I have a view

<script type="text/javascript" src="<?php echo site_url('public/js/jquery.js') ?>" ></script>
<script type="text/javascript" src="<?php echo site_url('javascript/main.js') ?>" ></script>


    <div id="message"><p></p></div>

    <form id="convertForm" name="convertForm" onsubmit="return false; ">
        CSV<br /><textarea id="csv" name="csv" rows="10" cols="60"></textarea><br /><br />

        JSON<br /><textarea id="json" name="json" rows="10" cols="60" readonly="readonly"></textarea><br /><br />


        <input type="button" value="Convert" id="submitButton"/> <input type="reset" />
    </form>

And the main.js file

function parseCSVLine (line)

            {
                line = line.split(',');
                for (var i = 0; i < line.length; i++)
                {
                    var chunk = line[i].replace(/^[\s]*|[\s]*$/g, "");
                    var quote = "";
                    if (chunk.charAt(0) == '"' || chunk.charAt(0) == "'") quote = chunk.charAt(0);
                    if (quote != "" && chunk.charAt(chunk.length - 1) == quote) quote = "";

                    if (quote != "")
                    {
                        var j = i + 1;

                        if (j < line.length) chunk = line[j].replace(/^[\s]*|[\s]*$/g, "");

                        while (j < line.length && chunk.charAt(chunk.length - 1) != quote)
                        {
                            line[i] += ',' + line[j];
                            line.splice(j, 1);
                            chunk = line[j].replace(/[\s]*$/g, "");
                        }

                        if (j < line.length)
                        {
                            line[i] += ',' + line[j];
                            line.splice(j, 1);
                        }
                    }
                }

                for (var i = 0; i < line.length; i++)
                {
                    // remove leading/trailing whitespace
                    line[i] = line[i].replace(/^[\s]*|[\s]*$/g, "");

                    // remove leading/trailing quotes
                    if (line[i].charAt(0) == '"') line[i] = line[i].replace(/^"|"$/g, "");
                    else if (line[i].charAt(0) == "'") line[i] = line[i].replace(/^'|'$/g, "");
                }

                return line;
            }

            function csvToJson ()
            {
                var message = "";
                var error = false;
                var f = document.forms["convertForm"];
                var csvText = f.elements["csv"].value;
                var jsonText = "";

                setMessage(message, error);

                if (csvText == "") { error = true; message = "Enter CSV text below."; }

                if (!error)
                {
                    benchmarkStart = new Date();
                    csvRows = csvText.split(/[\r\n]/g); // split into rows

                    // get rid of empty rows
                    for (var i = 0; i < csvRows.length; i++)
                    {
                        if (csvRows[i].replace(/^[\s]*|[\s]*$/g, '') == "")
                        {
                            csvRows.splice(i, 1);
                            i--;
                        }
                    }

                    if (csvRows.length < 2) { error = true; message = "The CSV text MUST have a header row!"; }
                    else
                    {
                        objArr = [];

                        for (var i = 0; i < csvRows.length; i++)
                        {
                            csvRows[i] = parseCSVLine(csvRows[i]);
                        }

                        benchmarkParseEnd = new Date();

                        for (var i = 1; i < csvRows.length; i++)
                        {
                            if (csvRows[i].length > 0) objArr.push({});

                            for (var j = 0; j < csvRows[i].length; j++)
                            {
                                objArr[i - 1][csvRows[0][j]] = csvRows[i][j];
                            }
                        }

                        benchmarkObjEnd = new Date();

                        jsonText = JSON.stringify(objArr, null, "\t");

                        benchmarkJsonEnd = new Date();

                        f.elements["json"].value = jsonText;

                        benchmarkPopulateEnd = new Date();

                        message = getBenchmarkResults();


                    }
                }

                setMessage(message, error);
            }

$(document).ready(function(){

            $('#submitButton').on('click', function(){

                console.log('i got here');
                csvToJson;


            });



});

This works perfectly but console.log is never shown.

And if I try to do something like return the jsonText from the csvToJson function and then append it to the second textarea, that doesn’t work either.

function csvToJson ()

{

//same code here

return jsonText;

}


$(document).ready(function(){

            $('#submitButton').on('click', function(){

                console.log('i got here');
                jsont = csvToJson();
                                $("#json").val(jsonT);


            });

It’s clearly something I don’t get about submitting. Should I use jquery .submit() function ?

Answer 1

You are missing brackets when calling csvToJson inside the click handler.

Change:

$('#submitButton').on('click', function(){ 
                csvToJson;
});

TO

$('#submitButton').on('click', function(){ 
                csvToJson();
});

DEMO: http://jsfiddle.net/MRmJM/1/

One note: If CSV is separated by semi-colon (not uncommon) , parser code fails to create proper object