CSV To JSON Conversion


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSV to JSON</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
</head>
<body>
CSV to JSON Converter
<hr />

Paste Your CSV Here:

    <textarea id="csv" class="text" > </textarea>
    
    <button id="convert">Convert to JSON</button>
      
    <button id="download">Download JSON</button>
    <textarea id="json" class="text"></textarea>
    
	

<style>	.text{width: 100%;height: 250px;} button{margin:10px 0}	</style>

	<script>
	
	

function CSVToArray(strData, strDelimiter) {
    // Check to see if the delimiter is defined. If not,
    // then default to comma.
    strDelimiter = (strDelimiter || ",");
    // Create a regular expression to parse the CSV values.
    var objPattern = new RegExp((
    // Delimiters.
    "(\\" + strDelimiter + "|\\r?\\n|\\r|^)" +
    // Quoted fields.
    "(?:\"([^\"]*(?:\"\"[^\"]*)*)\"|" +
    // Standard fields.
    "([^\"\\" + strDelimiter + "\\r\\n]*))"), "gi");
    // Create an array to hold our data. Give the array
    // a default empty first row.
    var arrData = [[]];
    // Create an array to hold our individual pattern
    // matching groups.
    var arrMatches = null;
    // Keep looping over the regular expression matches
    // until we can no longer find a match.
    while (arrMatches = objPattern.exec(strData)) {
        // Get the delimiter that was found.
        var strMatchedDelimiter = arrMatches[1];
        // Check to see if the given delimiter has a length
        // (is not the start of string) and if it matches
        // field delimiter. If id does not, then we know
        // that this delimiter is a row delimiter.
        if (strMatchedDelimiter.length && (strMatchedDelimiter != strDelimiter)) {
            // Since we have reached a new row of data,
            // add an empty row to our data array.
            arrData.push([]);
        }
        // Now that we have our delimiter out of the way,
        // let's check to see which kind of value we
        // captured (quoted or unquoted).
        if (arrMatches[2]) {
            // We found a quoted value. When we capture
            // this value, unescape any double quotes.
            var strMatchedValue = arrMatches[2].replace(
            new RegExp("\"\"", "g"), "\"");
        } else {
            // We found a non-quoted value.
            var strMatchedValue = arrMatches[3];
        }
        // Now that we have our value string, let's add
        // it to the data array.
        arrData[arrData.length - 1].push(strMatchedValue);
    }
    // Return the parsed data.
    return (arrData);
}

function CSV2JSON(csv) {
    var array = CSVToArray(csv);
    var objArray = [];
    for (var i = 1; i < array.length; i++) {
        objArray[i - 1] = {};
        for (var k = 0; k < array[0].length && k < array[i].length; k++) {
            var key = array[0][k];
            objArray[i - 1][key] = array[i][k]
        }
    }

    var json = JSON.stringify(objArray);
    var str = json.replace(/},/g, "},\r\n");

    return str;
}

$("#convert").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    $("#json").val(json);
});

$("#download").click(function() {
    var csv = $("#csv").val();
    var json = CSV2JSON(csv);
    window.open("data:text/json;charset=utf-8," + escape(json))
});

</script>
</body>
</html>
Advertisements

Preview an image before it is uploaded using JS

Hi,

My colleagues many times asked this question. So i am sharing a simple method to achieve this.

HTML

<form id="form1">
   <input id="filePic" type="file" />
   <img id="imgPic" src="#" alt="" />
</form>

Javascript

function SetImage(fileInput, imgCtrl) {
   if (fileInput.files && fileInput.files[0]) {
       var reader = new FileReader();
       reader.onload = function (e) {
           imgCtrl.attr('src', e.target.result);
       }
       reader.readAsDataURL(fileInput.files[0]); 
   } 
}

$("#filePic").change(function (e) {
   SetImage(this, $("#imgPic"));
});
 

Attribute Contains Selector in JQuery

This is the most generous of the jQuery attribute selectors that match against a value. It will select an element if the selector’s string appears anywhere within the element’s attribute value. Compare this selector with the Attribute Contains Word selector (e.g. [attr~=”word”]), which is more appropriate in many cases.

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>attributeContains demo</title>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
    <input name="sub1">
    <input name="sub2">
    <input name="sub2">
    <input name="book">
    <script>
        $("input[name*='sub']").val("this box for book!");
    </script>
</body>

</html>

In this code $( “input[name*=’sub’]” ) select first three textboxes.Becouse both contains “sub” in name attribute.