I'm attempting to implement local JSON data into a Tabulator table. I specifically want to display the obj.File.Name JSON element.
I can render the data into a regular table, but when I incorporate Tabulator the data doesn't render at all. I think the problem lies with the Tabulator Section that's listed in the JS Snippet, but I'm not 100% sure. I'm interested in using Tabulator because of the features it offers.
Unless I misread it, the Tabulator docs on loading data seems to be less focused on local files and more on external URLs, which is why I've come to ask about it here.
I've included a JS Fiddle that shows the HTML and the JS.
JS snippet:
import $ from 'jquery';
import JSONfile from '../../../public/JSONfile.json';
import { basename } from 'path';
var Tabulator = require('tabulator-tables');
var categories = '';
var tableRes = '';
export default class {
constructor() {
this.loadData();
this.loadTableData();
}
loadTableData() {
let tableRes = JSONfile.d.results.filter(function(val) {
return (val.FileLeafRef.trim().length > 0);
}).map(function(obj) {
return {
// "FileName": obj.FileLeafRef,
"Path": obj.EncodedAbsUrl,
"Titles": obj.File.Name
}
});
///// Tabulator Section /////
let tableData = tableRes;
let table = new Tabulator("#km-table-id", {
data:tableData,
columns:[
{title:"", field:" "},
{title:"All Templates", field:"Name"},
{title:"My Favorites", field:"faves"}
],
pagination:"local",
paginationSize:100,
placeholder:"No data available"
});
table.setData(tableData);
} // ------------------ loadTableData
} // ------------- export default class
JSON snippet:
{
"d": {
"results": [
{
"__metadata": {
...
},
"File": {
"__metadata": {
...
},
"Name": "Guide to Product IDs.docx"
},
"FileLeafRef": "Guide to Product IDs.docx",
"ResourceType": {
...
},
"results": [
{
...
}
]
},
"EncodedAbsUrl": [redacted]
},
...
...
