Tabulator: json mapquest traffic incidents

Created on 21 Nov 2017 · 7Comments · Source: olifolkerd/tabulator

Anything I'm doing wrong?

Here's the error and code
uncaught

Ultimately, I want to display the following results set dynamically from JSON using tabulator.

capture

<html>
  <head>
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/js/tabulator.min.js"></script>

  </head>
  <body>

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

  <script> 

  $("#example-table").tabulator("setData", "https://www.mapquestapi.com/traffic/v2/incidents?&outFormat=json&boundingBox=49.333400639691035%2C-122.77496337890625%2C49.15162235335807%2C-123.23638916015624&filters=construction%2Cincidents%2Cevent%2Ccongestion&key=PdA752LzJf3TG9HStfoASvzllR1Lb6FV"); 




  //Build Tabulator 
  $("#example-table").tabulator({ 
    height: "311px", 
    layout: "fitColumns", 
    placeholder: "No Data Set", 
    columns: [ 
        {title: "Id", field: "incidents.Id", width: 200 }, 

    ], 

            rowClick: function (e, row) { //trigger an alert message when the row is clicked 
            alert("Row " + row.getData().id + " Clicked!!!!"); 

        }, 

});

            ajaxResponse: function ("url, params, response") { 
            //url - the URL of the request 
            //params - the parameters passed with the request 
            //response - the JSON object returned in the body of the response. 

            return response.incidents; 
            //return the data property of a response json object 

            }, 

            }); </script>



  </body>
</html>

Question - Ask On Stack Overflow

Source

Diskovered

Most helpful comment

Ok got it, tnx again.

Diskovered on 21 Nov 2017

🎉1 👍1

All 7 comments

Hey @Diskovered
The issue is that you are defining your ajaxResponse callback outside of your tabulator constructor, you need to remove the }); before the word ajaxResponse

Cheers

Oli

olifolkerd on 21 Nov 2017

Thanks Oli.

New error
error

Here's the updated code. Any help you can provide is appreciated. Thanks.

<html>
  <head>
    <script   src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/css/tabulator.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.1/js/tabulator.min.js"></script>

  </head>
  <body>

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

  <script> 

  $("#example-table").tabulator("setData", "https://www.mapquestapi.com/traffic/v2/incidents?&outFormat=json&boundingBox=49.333400639691035%2C-122.77496337890625%2C49.15162235335807%2C-123.23638916015624&filters=construction%2Cincidents%2Cevent%2Ccongestion&key=PdA752LzJf3TG9HStfoASvzllR1Lb6FV"); 



  //Build Tabulator 
  $("#example-table").tabulator({ 
    height: "311px", 
    layout: "fitColumns", 
    placeholder: "No Data Set", 
    columns: [ 
        {title: "Id", field: "Id", width: 200 }, 

    ], 

            rowClick: function (e, row) { //trigger an alert message when the row is clicked 
            alert("Row " + row.getData().id + " Clicked!!!!"); 

        }, 


            ajaxResponse: function (url, params, response) { 
            //url - the URL of the request 
            //params - the parameters passed with the request 
            //response - the JSON object returned in the body of the response. 

            return response.id; 
            //return the data property of a response json object 

            }, 

            }); 

            </script>



  </body>
</html>

Diskovered on 21 Nov 2017

that error is because you are calling the setData function before you have defined your Tabulator, move that function to after the table definition and you should be good

olifolkerd on 21 Nov 2017

Awesome! All good now. Thanks much :)

Diskovered on 21 Nov 2017

Actually, I have one more question. I have this in JSON.

param2

How do I display this fields with parameters? It's loading like this:

param

Diskovered on 21 Nov 2017

if you wanted to show just one of the properties of that object you can use dot notation to set it in the field property of the column definition "parameterizedDescription.crossRoad2"

if you wanted to view a JSON encoded view of the object you would need to use a custom formatter.

Cheers

Oli

olifolkerd on 21 Nov 2017

Ok got it, tnx again.

Diskovered on 21 Nov 2017

🎉1 👍1

Was this page helpful?

0 / 5 - 0 ratings