DataTable doesn't initiate with JavaScript array

Chandler242

I have the following code. The DataTable doesn't initiate with JavaScript array dataSet. I checked the axios.get and it does get data into dataSet, but won't get into "table" instance. I think I must miss something. any input would be greatly appreciated. Thanks. YL

var dataSet=[];

methods: {
    onSubmit: function (event) {
        if (this.checkForm(event)) {
                  axios.post(url_3, {})
                    .then(function (response) {
                        axios.get(url_10)
                        .then(response => { dataSet = response.data });
                        dbTable();
                })
        }
    },

function dbTable() {
    table = $('#highway').DataTable({
        data: dataSet
    });
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Do you get erorrs?

Post an example of your datSet so we can see the structure of the data.

Kevin

Chandler242

Thank you for the response. No, I didn't get any error. The data simply doesn't show up in the HTML. Also everything works fine with Ajax option.

Here is the dataSet:

[{"SpanID":18,"HighwayID":1,"HighwayName":"U60","DirID":1,"Direction":"E","SpanTypeID":1,"SpanType":"Segment","BRPID":1,"BSeqN":1,"BRP":"MP5","BRPOffset":-0.50000,"ERPID":11,"ESeqN":8,"ERP":"MP12","ERPOffset":0.50000,"Seq":1,"FromDate":"1990-01-01T00:00:00"},{"SpanID":20,"HighwayID":1,"HighwayName":"U60","DirID":1,"Direction":"E","SpanTypeID":3,"SpanType":"Division","BRPID":1,"BSeqN":1,"BRP":"MP5","BRPOffset":-0.50000,"ERPID":5,"ESeqN":3,"ERP":"MP7","ERPOffset":0.50000,"Seq":1,"FromDate":"1990-01-01T00:00:00"},{"SpanID":21,"HighwayID":1,"HighwayName":"U60","DirID":1,"Direction":"E","SpanTypeID":3,"SpanType":"Division","BRPID":5,"BSeqN":3,"BRP":"MP7","BRPOffset":0.50000,"ERPID":11,"ESeqN":8,"ERP":"MP12","ERPOffset":0.50000,"Seq":2,"FromDate":"1990-01-01T00:00:00"}]

Thank you.

YL

kthorngren

Since your data is object based you need to use columns.data to define it. See the Data Docs for more info.

Kevin

Chandler242

Thanks, Kevin.

I think I found the problem. It wasn't related to DataTable but to a Vue instance I used. Somehow Vue won't allow assigning dataSet to any variables immediately after the axios.get, which may have something to do its tracking system.

Thanks, again !