I’ve created a table in the Wix editor & I’m looking to populate both columns and rows with values returned by an Api call. I initially tried having a single, placeholder column (as the table must have at least 1 column in the editor), then clearing the columns and rows in code & finally populating the columns and rows with the results of the call. The following code results in the columns being correctly created, the correct number rows are also created but no data is shown.
import {getLeagueTable} from ‘backend/leagueTables’ ;
$w.onReady( function () {
getLeagueTable( 99999 )
.then(json => {
// get the column headers
let headings = json.league_table[ 0 ].headings;
// select the tables columns for manipulation, reset placeholder data
let columns = $w( “#table” ).columns = ;
for ( const x in headings) {
columns.push( {
“id” : x,
“label” : headings,
“width” : 250 ,
“visible” : true ,
“type” : “string”
})}
$w( "#table" ).columns = columns;
// get the rows of values - NB in order to be displayed the row property key must match a column name
let values = json.league_table[ 0 ].values;
// set the tables rows to the values retrieved by the api
$w( “#table” ).rows = values;
})
. **catch** (error => {
console.log(error);
});
});
To make this work as expected, I’ve had to manually create the columns with the correct fieldnames in the editor, after that the rows are created and displayed correctly.
As an aside, when executing the code in the onReady event, the Api call is executed from the browser and there’s a delay in the table being populated after the page is initially rendered - is there a way of calling the ‘backend’ code as the page is being rendered server side to avoid this?