insert data into html table from flat file

Question

I have lots of user records similar to the following inside my main index.html page:

<tr>
    <td>Angelica Ramos</td>
    <td>Chief Executive Officer (CEO)</td>
    <td>London</td>
    <td>47</td>
    <td>2009/10/09</td>
    <td>$1,200,000</td>
    <td>504</td>
</tr>

This is of course in a table. Now, what i want to do is make this dynamic. I cant modify the original index.html page each time a user record is updated. so my question is, how do i make html read from a file and insert the records in the file in the table in the original index.html file?

my index.html file has a code that allows you to type a user name in a search box and the record for that particular user will pop up. the preferred solution will work with this already existing code so that, after html reads from the record from the external file, an admin can still search for the user name and have the user name pop up as though it was still embedded in the original index.html file.

I tried to do this on my own, but was not successful:

<script>
    $.ajax( {url:"myuserRecords.html", dataType:"text"}).done( function(data){ $('#table-responsive').html(data); });
</script>

The record did not show up when searched for through the search box.

can you send your code by jsfiddle? – saranchel n Jan 21 '18 at 04:45 — saranchel n, Jan 21 '18 at 04:45

score 0 · Accepted Answer · answered Jan 21 '18 at 08:08

The following works with a CSV file. You may need to do this before proceding.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>StackOverflow</title>
</head>
<body>
    <input type="text" id="searchvalue"><button onclick="search()">Search</button>
    <table id="userslist"></table>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        var data = [],keys,values=[],delimeter=";";
        function getData(onsuccess)
        {
            $.ajax({
                url:"/Users/Default/Downloads/test.csv",
                type:"GET",
                datatype:"csv",
                success:onsuccess
            });
        }

        function parseData()
        {
            keys = data.splice(0,1)[0].split(delimeter);
            values = [];
            for(var i=0,n=data.length;i<n;i++)
            {
                values.push(data[i].split(delimeter));
            }
        }

        function getTableRow(data,isheading)
        {
            var rowtype = isheading ? 'th' : 'td';
            var rowhtml = '<tr>';
            for(var key in data)
            {
                rowhtml+='<'+rowtype+'>'+data[key]+'</'+rowtype+'>';
            }
            return (rowhtml+'</tr>');
        }

        function populateData()
        {
            var htmldata = "";
            htmldata = getTableRow(keys,true);
            for(var index in values)
            {
                htmldata+=getTableRow(values[index]);
            }

            document.getElementById("userslist").innerHTML = htmldata;
        }

        function search()
        {
            var data = [], keys = [], values = [];;
            function addRecord()
            {
                for(var i=0,n=data.length;i<n;i++)
                {
                    var value = data[i].split(delimeter);
                    if(value[0].toLowerCase().includes(searchvalue.toLowerCase()))
                    {
                        values.push(value);
                    }
                }
                if(values.length)
                {
                    for(var index in values)
                    {
                        table.insertAdjacentHTML("beforeend",getTableRow(values[index]));
                    }
                }
                else
                {
                    alert("No records found.")
                }

            }
            var searchvalue = document.getElementById("searchvalue").value;
            var table = document.getElementById("userslist");
            getData(function(response){
                data = response.split(/\n/);
                addRecord();
            });
        }

        getData(function(response){ data = response.split(/\n/); parseData(); populateData();});
    </script>
</body>
</html>

insert data into html table from flat file

1 Answers1