locked
Import data form .csv file to Html Table

    Question

  • I have saved excel file as .csv know I want to import that data into HTML table e.g. the data in the .csv file is as

    Name,Father's Name,Roll No.,Attendance
    abc,xyz,11011519-059,P
    cdf,ijk,11011519-007,A

         

    Then I want to save it as excel file.

    How can I add such functionality in my app?


    samEE

    Tuesday, July 1, 2014 6:31 AM

Answers

  • Try this:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>CSVToHTML</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <script type="text/javascript">
            function PickCSVFile() {
                var MyFileOpenPicker = new Windows.Storage.Pickers.FileOpenPicker();
                MyFileOpenPicker.fileTypeFilter.append(".csv");
                var OutputTableRows = "";
                MyFileOpenPicker.pickSingleFileAsync().then(
                    function (CSVFile) {
                        if (!CSVFile) return;
                        Windows.Storage.FileIO.readTextAsync(CSVFile).then(
                            function (CSVText) {
                                if (!CSVText) return;
                                var CSVLines = CSVText.split("\r\n");
                                for (var i = 0; i < CSVLines.length; i++) {
                                    OutputTableRows += "<tr>";
                                    var CSVValues = CSVLines[i].split(",");
                                    for (var j = 0; j < CSVValues.length; j++) {
                                        OutputTableRows += "<td>" + CSVValues[j] + "</td>";
                                    }
                                    OutputTableRows += "</tr>";
                                }
                                document.getElementById("OutputTable").innerHTML = OutputTableRows;
                            });
                    });
            }
        </script>
    </head>
    <body style="color: white">
        <button onclick="PickCSVFile()" style="color: white" >Click here</button>
        <table id="OutputTable" style="color: white" border="1">
            
        </table>
    </body>
    </html>
    


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by Sameel Nawaz Thursday, July 3, 2014 3:12 PM
    Thursday, July 3, 2014 2:16 PM
    Moderator

All replies

  • It's a text file.  You open and read it using FileIO, then create your HTML.  Save it again as a .CSV file.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Tuesday, July 1, 2014 12:19 PM
    Moderator
  • It's a .csv file I saved it as .csv using excel.

    samEE

    Wednesday, July 2, 2014 3:57 AM
  • Yes, which is a text file. Which part if giving you problems?

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Wednesday, July 2, 2014 1:01 PM
    Moderator
  • I don't know how to add text into table rows. Can u please provide a demo, that will be helpful for me?

    samEE

    Wednesday, July 2, 2014 2:01 PM
  • This code is working fine. It reads data successfully from .csv or .txt file but my problem is that I want that data in HTML Table. Can u please provide a simple solution which I can implement on this code

    <!DOCTYPE html>
    <html>
    <head>
        <title>Read File (via User Input selection)</title>
        <script type="text/javascript">
            var reader; //GLOBAL File Reader object for demo purpose only
    
            /**
             * Check for the various File API support.
             */
            function checkFileAPI() {
                if (window.File && window.FileReader && window.FileList && window.Blob) {
                    reader = new FileReader();
                    return true;
                } else {
                    alert('The File APIs are not fully supported by your browser. Fallback required.');
                    return false;
                }
            }
    
            /**
             * read text input
             */
            function readText(filePath) {
                var output = ""; //placeholder for text output
                if (filePath.files && filePath.files[0]) {
                    reader.onload = function (e) {
                        output = e.target.result;
                        displayContents(output);
                    };//end onload()
                    reader.readAsText(filePath.files[0]);
                }//end if html5 filelist support
                else if (ActiveXObject && filePath) { //fallback to IE 6-8 support via ActiveX
                    try {
                        reader = new ActiveXObject("Scripting.FileSystemObject");
                        var file = reader.OpenTextFile(filePath, 1); //ActiveX File Object
                        output = file.ReadAll(); //text contents of file
                        file.Close(); //close file "input stream"
                        displayContents(output);
                    } catch (e) {
                        if (e.number == -2146827859) {
                            alert('Unable to access local files due to browser security settings. ' +
                             'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' +
                             'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"');
                        }
                    }
                }
                else { //this is where you could fallback to Java Applet, Flash or similar
                    return false;
                }
                return true;
            }
    
            /**
             * display content using a basic HTML replacement
             */
            function displayContents(txt) {
                var el = document.getElementById('main');
                el.innerHTML = txt; //display output in DOM
            }
        </script>
    </head>
    <body onload="checkFileAPI();">
        <div id="container">
            <input type="file" onchange='readText(this)' />
            <br />
            <hr />
            <h3>Contents of the Text file:</h3>
            <div id="main">
                ...
            </div>
        </div>
    </body>
    </html>


    samEE

    Thursday, July 3, 2014 5:12 AM
  • Try this:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>CSVToHTML</title>
    
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
    
        <script type="text/javascript">
            function PickCSVFile() {
                var MyFileOpenPicker = new Windows.Storage.Pickers.FileOpenPicker();
                MyFileOpenPicker.fileTypeFilter.append(".csv");
                var OutputTableRows = "";
                MyFileOpenPicker.pickSingleFileAsync().then(
                    function (CSVFile) {
                        if (!CSVFile) return;
                        Windows.Storage.FileIO.readTextAsync(CSVFile).then(
                            function (CSVText) {
                                if (!CSVText) return;
                                var CSVLines = CSVText.split("\r\n");
                                for (var i = 0; i < CSVLines.length; i++) {
                                    OutputTableRows += "<tr>";
                                    var CSVValues = CSVLines[i].split(",");
                                    for (var j = 0; j < CSVValues.length; j++) {
                                        OutputTableRows += "<td>" + CSVValues[j] + "</td>";
                                    }
                                    OutputTableRows += "</tr>";
                                }
                                document.getElementById("OutputTable").innerHTML = OutputTableRows;
                            });
                    });
            }
        </script>
    </head>
    <body style="color: white">
        <button onclick="PickCSVFile()" style="color: white" >Click here</button>
        <table id="OutputTable" style="color: white" border="1">
            
        </table>
    </body>
    </html>
    


    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    • Marked as answer by Sameel Nawaz Thursday, July 3, 2014 3:12 PM
    Thursday, July 3, 2014 2:16 PM
    Moderator
  • Above Code works fine now I want to enhance the code.Can I use Radio Button and Save value as A or P in Attendance column ?
    In other words I want Attendance Column Editable.

    samEE

    Thursday, July 3, 2014 3:11 PM
  • Sam... you're a computer science student... you've got to write this yourself.  I've given you the start on your project.

    Matt Small - Microsoft Escalation Engineer - Forum Moderator
    If my reply answers your question, please mark this post as answered.

    NOTE: If I ask for code, please provide something that I can drop directly into a project and run (including XAML), or an actual application project. I'm trying to help a lot of people, so I don't have time to figure out weird snippets with undefined objects and unknown namespaces.

    Thursday, July 3, 2014 3:21 PM
    Moderator
  • Thank you for your help @Matt

     
    I am using contenteditable="true" as

    <

    tableid="OutputTable"style="color: white"border="1"contenteditable="true"></table>

    but it is not making the table editable what should I do .


    samEE

    Thursday, July 3, 2014 3:53 PM