Convert json to csv file in JS/C#/MVC4 and populate AccessDB

Question

I've a problem on my website. I currently have an application form and submits the form, an email is sent. I wish I could create a csv file to sending the form. And secondly, to automatically populate my database access via this CSV file.

My ASP form:

<div class="submit">
    <div class="left">
        <div class="field"><input id="inputFirstname" type="text" value="First name *" class="watermark" name="firstname"/></div>
        <div class="field"><input id="inputLastname" type="text" value="Last name *" class="watermark" name="lastname"/></div>
        <div class="field"><input id="inputEmail" type="text" value="E-mail *" class="watermark" name="email"/></div>
        <div class="fieldradio" style="margin-bottom:10px;">
                <label class="watermark" style="display:inline">Gender *</label>
                    <input id="inputGenderM"  class="watermark"  style="display:inline;width: 10px" name="gender" type="radio"  />
                <label class="watermark"  style="display:inline">M</label>
                    <input id="inputGenderF"  class="watermark"  style="display:inline;width: 10px"  name="gender" type="radio" />
                <label class="watermark"  style="display:inline">F</label>
        </div>
 </div>
 <div class="right">
    <div class="textarea"><textarea id="inputMessage" name="message" class="watermark">Add your message here</textarea></div>                               
    <div style="float:left;width:100%; margin-top:30px;">
    <div id="captchadiv"><input id="captchaInput" type="text" value="Enter validation text *" name="captchaInput" class="watermark" style="margin-top:10px;"/></div>
   </div>
   <div class="clear"></div>
   <div class="submit_container" id="submitArea">
       <a onclick="javascript:submitCV();" class="btn orange height_19 submit"><span>
        SEND FORM</span></a>
   </div>
</div>

My function JS "submitCV()" :

$(document).ready(
    function(){

        $.getJSON('http://jsonip.appspot.com/?callback=?',
    function(data){
      clientIP = data.ip;
    });

 function submitCV() {
    if( $("#inputFirstname").val() == false)
    {
        $('#inputFirstname').addClass('errorValidationSubmit');
        alert('Please fill the FirstName field ');
        return;
    }
    if($("#inputLastname").val() == false)
    {
        $('#inputLastname').addClass('errorValidationSubmit');
        alert('Please fill the LastName field ');
        return;
    }

    var genderId = $('input[name=gender]:checked').attr('id');
    if(typeof genderId == 'undefined')
    {
        $('.fieldradio').addClass('errorValidationSubmit');

        alert('Please choose a gender ');
        return;
    }

    if( validateEmail($("#inputEmail").val()) == false)
    {
        $('#inputEmail').addClass('errorValidationSubmit');
        alert('Invalid e-mail address.');           
        return;
    }       
    if( $(".submit .dropdown dt a").attr('href') =="#"){
        $('.submit .dropdown').addClass('errorValidationSubmit');
        alert('Please select an open position');
        return;
    }           

    if($("#captchaInput").val() == false || $("#captchaInput").val().length != 5)
    {
        $('#captchaInput').addClass('errorValidationSubmit');
        $('.realperson-text').addClass('errorValidationSubmit');
        alert('Please fill the Validation Text Field with the Captcha (5 characters)');
        return;
    }


    var path = $(location).attr('href');

    var capchallenge = cleanJSONString($(".realperson-hash").val());
        //Recaptcha.get_challenge();
    var capresponse = cleanJSONString($("#captchaInput").val());
        //Recaptcha.get_response();
    try {
        var parameters = '{  "url" : "' + escape(path) + 
                        '", "clientip" : "' + clientIP +
                        '", "firstname" : "' + cleanJSONString($("#inputFirstname").val()) + 
                        '", "lastname" : "' + cleanJSONString($("#inputLastname").val()) + 
                        '", "gender" : "' + cleanJSONString(genderId) + 
                        '", "email" : "' + cleanJSONString($("#inputEmail").val()) + 
                        '", "message" : "' + cleanJSONString($("#inputMessage").val()) + 
                        '", "position" : "' + cleanJSONString($(".submit_cv .dropdown dt a").attr('href')) +                            
                         '", "captchachallenge" : "' + capchallenge + 
                        '", "captcharesponse" : "' + capresponse  + '" }';

        contentSubmit = $("#submitArea").html();
        $("#submitArea").empty().html('<img src="/Style%20Library/ajax-loader.gif" />');

        jQuery.ajax({
            type: "POST",
            url: '_vti_bin/json/monservice.svc/submit',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            data: parameters,
            success: function (msg) {
                submitSucceeded(msg);
                $("#submitArea").empty().html(contentSubmit);
                 resetRealPersonCaptcha();
                 alert(parameters);
            },
            error: submitFailed
        });
    }
    catch (e) {
        alert('Error invoking service' + e);
        clearUploadPart();
    }
    //Recaptcha.reload();
}   
function submitSucceeded(result) {
    alert(result.submitResult);

    if (!result.submitResult.contains("The captcha verification didn't work. Please try again")) {
        clearUploadPart();
    } 
}
function submitFailed(error) {
    alert('An error occured.');
    //clearUploadPart();
    resetRealPersonCaptcha();
    $("#submitArea").empty().html(contentSubmit);
}

Is there a relatively quick opportunity to put in place to create a CSV file to be stored in one place? What do you recommend?

On the other hand, I want that every new CSV file, I can populate an Access database. If my CSV files on a FTP folder, you it is the possibility of a Unix script or simply VB?

user3263194 · Accepted Answer · 2014-12-01 10:35:02Z

1

If you are able to get the JSON data from the form, Use the following method JSONTOCSVConverter :

function JSONToCSVConvertor(JSONData, ReportName, ShowLabel) {

       //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
       var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

       var CSV = '';
       if (ShowLabel) {
           var row = "";
           //This loop will extract the label from 1st index of on array
          for (var index in arrData[0]) {
              //Now convert each value to string and comma-seprated
               row += index + ',';
          }
           row = row.slice(0, -1);

           //append Label row with line break
           CSV += row + '\r\n';
       }
       //1st loop is to extract each row
       for (var i = 0; i < arrData.length; i++) {
           var row = "";
           //2nd loop will extract each column and convert it in string comma-seprated
           for (var index in arrData[i]) {
               row += '"' + arrData[i][index] + '",';
           }
           row.slice(0, row.length - 1);
           //add a line break after each row
           CSV += row + '\r\n';
       }
       if (CSV == '') {
           alert('No data available');
           return;
       }
       //this will remove the blank-spaces from the title and replace it with an underscore
       var fileName = ReportName.replace(/ /g, "_");

       //Initialize file format you want csv or xls
       var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

       //this trick will generate a temp <a /> tag
       var link = document.createElement("a");
       link.href = uri;

       //set the visibility hidden so it will not effect on your web-layout
       link.style = "visibility:hidden";
       link.download = fileName + ".csv";

       //this part will append the anchor tag and remove it after automatic click
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
   }

edited Dec 1, 2014 at 10:35

answered Dec 1, 2014 at 10:01

user3263194

4537 silver badges20 bronze badges

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

8 Comments

user2814368 Over a year ago

Thank you! I do not see how to use this feature? I use the "Submit" function of a button, when should I call the JSONTOCSVConverter function? Should I apply it on my data "Parameters"? Or do I give the path to the CSV file?

user3263194 Over a year ago

Do you have a extra button to create the csv file or do you want to create it at the moment you submit the form?

user2814368 Over a year ago

Yes, i want to create it at the moment you submit the form and it's my difficulty

user2814368 Over a year ago

My script allows me to get my json, but I can't automatically create my file(csv) when the user submits the form ...

user3263194 Over a year ago

In the sample fiddle above you are able to get the csv file when user submits the form. You need to call the JSONToCSVConverter method inside the submit method call.

|

No Idea For Name · Accepted Answer · 2014-12-28 07:25:19Z

0

Thanks but in my form i use already :

<div class="submit_container" id="submitArea">
    <a onclick="javascript:submit();" class="btn orange height_19 submit"><span>
        SEND FORM</span></a>
</div>

It's possible to call another method inside the submit method call ?

Or i must add at this function ?

    $(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        return false;
    });
});

edited Dec 28, 2014 at 7:25

No Idea For Name

11.6k11 gold badges49 silver badges73 bronze badges

answered Dec 1, 2014 at 13:13

user2814368

372 silver badges8 bronze badges

Collectives™ on Stack Overflow

Convert json to csv file in JS/C#/MVC4 and populate AccessDB

2 Answers 2

8 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related