DataTable doesn't initiate with JavaScript array

DataTable doesn't initiate with JavaScript array

Chandler242Chandler242 Posts: 36Questions: 12Answers: 0
edited October 2020 in DataTables

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.

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    Do you get erorrs?

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

    Kevin

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • Chandler242Chandler242 Posts: 36Questions: 12Answers: 0

    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 !

This discussion has been closed.