Load table data from text file

0
votes

My table data is stored in a text file named test_array.txt

[
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"},
];

How do I call a text file when I setData. I tried the below and the table structure is build, but the data does not load, but states ERROR in the table.

       //load sample data into the table
    table.setData("../textfiles/test_array.txt");

In my browser console, I get the following error message.

Ajax Load Error: SyntaxError: "JSON.parse: expected property name or '}' at line 2 column 2 of the JSON data"

Here is my entire script

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Johnson County Pharmacy Association, Johnson County, Iowa" />
<meta name="keywords" content="Johnson County Iowa Pharmacy Association pharmacist technician" />
<link href="../css/main.css" rel="stylesheet" />
<link href="../css/tabulator.css" rel="stylesheet" />
<link href="../css/tabulator.css.map" rel="stylesheet" />
<script type="text/javascript" src="../js/tabulator.js"></script>
<title>JCPA</title>
</head>

<body>
<div id="tblwrap">
<h2>Meeting Information Editor</h2>

    <div id="example-table"></div>

    <script>
        //create Tabulator on DOM element with id "example-table"
        var table = new Tabulator("#example-table", {
     	height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
     	layout:"fitDataFill",//fit columns to fit data and width of table (optional)
		//data:tableData, //set initial table data
     	columns:[ //Define Table Columns
    	 	{title:"Name", field:"name", width:150},
    	 	{title:"Age", field:"age", align:"left", formatter:"progress"},
    	 	{title:"Favourite Color", field:"col"},
    	 	{title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
     	],
     	rowClick:function(e, row){ //trigger an alert message when the row is clicked
     		alert("Row " + row.getData().id + " Clicked!!!!");
     	},
        });
      
        //load sample data into the table
    table.setData("../textfiles/test_array.txt");
    </script> 
</div>
</body>
</html>
2
tabulator

2 Answers

1
votes

I got it to work using double quotes on the keys

[
{"name":"Oli Bob", "age":"12", "col":"red", "dob":""},
{"name":"Mary May", "age":"1", "col":"blue", "dob":"14/05/1982"},
{"name":"Christine Lobowski", "age":"42", "col":"green", "dob":"22/05/1982"},
{"name":"Brendon Philips", "age":"125", "col":"orange", "dob":"01/08/1980"},
{"name":"Margret Marmajuke", "age":"16", "col":"yellow", "dob":"31/01/1999"}
]
0
votes

You have an invalid trailing comma on line 6 of your code, the row with an id of 5 should not have a comma at the end, and you do not need a semi colon after the array, it is invalid JSON. It should be:

[
{id:1, name:"Oli Bob", age:"12", col:"red", dob:""},
{id:2, name:"Mary May", age:"1", col:"blue", dob:"14/05/1982"},
{id:3, name:"Christine Lobowski", age:"42", col:"green", dob:"22/05/1982"},
{id:4, name:"Brendon Philips", age:"125", col:"orange", dob:"01/08/1980"},
{id:5, name:"Margret Marmajuke", age:"16", col:"yellow", dob:"31/01/1999"}
]

Have you checked in your browser network developer tools what the response is? It may also be possible that your server is not returning the file you are expecting, checking in the network tools should let you confirm what is being returned