Transform JSON data into a CSV file using JavaScript or C# in an MVC4 framework, then import the data into

Question

Transform JSON data into a CSV file using JavaScript or C# in an MVC4 framework, then import the data into

I am facing an issue with my website. Currently, when a user submits an application form, an email is sent. However, I would like to create a CSV file containing the form data and then automatically populate my database using this CSV file.

Here is 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>

The JavaScript function "submitCV()":

$(document).ready(
    function(){

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

 function submitCV() {
    // Validation code
}

function submitSucceeded(result) {
    // Success handling code
}

function submitFailed(error) {
    // Error handling code
}

Is there a quick way to implement creating a CSV file for storage? What do you suggest?

Additionally, I would like to know how to automatically populate an Access database with each new CSV file. Would a Unix script or VB be suitable for this task if the CSV files are stored in an FTP folder?

javascript c#asp.net-mvc json csv

Answer 1

Answer №1

If you have succeeded in extracting the JSON data from the form, you can employ the following function called JSONTOCSVConverter :

function ConvertJSONToCSV(JSONData, FileName, DisplayLabels) {

       //If JSONData is not an object, then parse it into an Object using JSON.parse
       var dataArray = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData;

       var CSVString = '';
       if (DisplayLabels) {
           var labelRow = "";
           //Extract labels from the first row of the array
           for (var key in dataArray[0]) {
               //Convert values to string and separate them with commas
               labelRow += key + ',';
           }
           labelRow = labelRow.slice(0, -1);

           //Append Label row with a line break
           CSVString += labelRow + '\r\n';
       }

       //Loop through each row
       for (var j = 0; j < dataArray.length; j++) {
           var dataRow = "";
           //Nested loop to extract each column and convert it to a comma-separated string
           for (var key in dataArray[j]) {
               dataRow += '"' + dataArray[j][key] + '",';
           }
           dataRow.slice(0, dataRow.length - 1);
           //Add a line break after each row
           CSVString += dataRow + '\r\n';
       }

       if (CSVString === '') {
           alert('No data available');
           return;
       }

       //Replace blank spaces in the file name with underscores
       var modifiedFileName = FileName.replace(/ /g, "_");

       //Choose file format as csv or xls
       var uriLink = 'data:text/csv;charset=utf-8,' + escape(CSVString);

       //Generate a temporary <a /> tag
       var linkTag = document.createElement("a");
       linkTag.href = uriLink;

       //Set visibility to hidden so it doesn't affect the layout
       linkTag.style = "visibility:hidden";
       linkTag.download = modifiedFileName + ".csv";

       //Append the anchor tag and remove it after automatic click
       document.body.appendChild(linkTag);
       linkTag.click();
       document.body.removeChild(linkTag);
   }

Answer 2

If you have succeeded in extracting the JSON data from the form, you can employ the following function called JSONTOCSVConverter :

function ConvertJSONToCSV(JSONData, FileName, DisplayLabels) {

       //If JSONData is not an object, then parse it into an Object using JSON.parse
       var dataArray = typeof JSONData !== 'object' ? JSON.parse(JSONData) : JSONData;

       var CSVString = '';
       if (DisplayLabels) {
           var labelRow = "";
           //Extract labels from the first row of the array
           for (var key in dataArray[0]) {
               //Convert values to string and separate them with commas
               labelRow += key + ',';
           }
           labelRow = labelRow.slice(0, -1);

           //Append Label row with a line break
           CSVString += labelRow + '\r\n';
       }

       //Loop through each row
       for (var j = 0; j < dataArray.length; j++) {
           var dataRow = "";
           //Nested loop to extract each column and convert it to a comma-separated string
           for (var key in dataArray[j]) {
               dataRow += '"' + dataArray[j][key] + '",';
           }
           dataRow.slice(0, dataRow.length - 1);
           //Add a line break after each row
           CSVString += dataRow + '\r\n';
       }

       if (CSVString === '') {
           alert('No data available');
           return;
       }

       //Replace blank spaces in the file name with underscores
       var modifiedFileName = FileName.replace(/ /g, "_");

       //Choose file format as csv or xls
       var uriLink = 'data:text/csv;charset=utf-8,' + escape(CSVString);

       //Generate a temporary <a /> tag
       var linkTag = document.createElement("a");
       linkTag.href = uriLink;

       //Set visibility to hidden so it doesn't affect the layout
       linkTag.style = "visibility:hidden";
       linkTag.download = modifiedFileName + ".csv";

       //Append the anchor tag and remove it after automatic click
       document.body.appendChild(linkTag);
       linkTag.click();
       document.body.removeChild(linkTag);
   }

Answer 3

Answer №2

Despite the code already present in my form, I have a question:

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

Is it possible to include another method within the existing submit function?

Or should I create a separate function for this purpose?

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

Answer 4

Despite the code already present in my form, I have a question:

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

Is it possible to include another method within the existing submit function?

Or should I create a separate function for this purpose?

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

Transform JSON data into a CSV file using JavaScript or C# in an MVC4 framework, then import the data into

Answer №1

Answer №2

Similar questions

Struggles with ajax and JavaScript arise when attempting to tally up grades

What is the best way to transfer data from a div tag to an li tag using JavaScript?

Converting Census Geocoder JSON data into an XML dataset with the help of JSON.net library in C# programming language

Developing applications using ReactJS with Typescript can sometimes lead to errors, such as the "onclick does not exist on type x

Placing an object to the right side

Is there a way to automatically update the latest ID in one tab or window when inserting records in a separate tab or window?

Tips for storing and retrieving high scores in a JavaScript game

Creating an animated transition for an element's height with CSS

A step-by-step guide on implementing the bootstrap paginator library to paginate PHP echoed data

What steps should I follow to change the appearance of this object to match this?

Error in scrolling previews detected in Jssor horizontal template maker

Attempting to reset the altered values proves ineffective in different Ctrl instances within AngularJS

Manipulate JSON insertions and character replacements using JavaScript or Python

What could be the reason for the failure of @babel/preset-react automatic transformation with Webpack?

Implementing AsyncTask in Android to establish a connection with MySQL database through PHP

Issues are arising with Jquery Scripts when running through Selenium in IE 9, resulting in the error message SCRIPT5009: '$' is undefined. However, these scripts are functioning correctly when executed directly in the web browser

What methods can I utilize to modify nested fields in a Logic App?

Verify the Existence of a Key in JSON Array

What is the reason for IE displaying null when the model does not exist?

Steps to create a toggle click event