Datatable + Google Map Clusters.. How to access DT data in drawCallback?

Datatable + Google Map Clusters.. How to access DT data in drawCallback?

BigDataWarehouseBigDataWarehouse Posts: 23Questions: 10Answers: 0

I'm trying to show my table data that contains (longitude and latitude coordinates) on a google map.
I have tested with static JSON data and was successful.

I have figured out that I can use drawCallback to only show data in the table on the google map

However when I try access 'res.data.forEach(function (o, i)' I get a Uncaught TypeError: Cannot read property 'data' of undefined error

res.data.forEach(function (o, i) {
                        o.hoverData = o.lat + " : " + o.lng;
                        o.dataset = [{ bar: 'boop' }, { foo: 'baz' }]
                        o.clickData = "You've clicked on this locaton:<br />" + o.lat + " : " + o.lng;
                        o.labelStyle = { background: 'salmon' }
                    });

here is the full code:

https://jsbin.com/rafehul/edit?html,js,output

Thank you for your help!

This question has an accepted answers - jump to answer

Answers

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

    Doesn't look like you have the callback parameters for the d3.json() method correct.

                        d3.json(data, function (error, res) {
                            //debugger
                            res.data.forEach(function (o, i) {
    

    Looking at the docs it has this:

    It passes parsed data object as a parameter to callback function.

    Looks like the callback has only one parameter. This is a d3 issue not a Datatables issue.

    Kevin

  • BigDataWarehouseBigDataWarehouse Posts: 23Questions: 10Answers: 0

    thanks for answer, i'll keep looking for a solution

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

    Do something like this too see what data is passed into the callback:

    d3.json( data, function( d3Data ) {
        console.log( d3Data );
    });
    

    Kevin

  • BigDataWarehouseBigDataWarehouse Posts: 23Questions: 10Answers: 0

    Kindly see the screenshot of the callback of

    d3.json( data, function( d3Data ) {
    console.log( d3Data );
    });

  • BigDataWarehouseBigDataWarehouse Posts: 23Questions: 10Answers: 0

    in the test I did earlier this was the json format:

    {
    "number_returned": 7539,
    "data": {
    "result_list": [

      {
        "lat": 39.498234,
        "lng": -121.54583,
        "id": 8116299
      },
      {
        "lat": 39.446293,
        "lng": -123.783508,
        "id": 9691790
      },
      {
        "lat": 39.295099,
        "lng": -123.342165,
        "id": 8096470
      },
      {
        "lat": 39.527885,
        "lng": -121.56486,
        "id": 10272631
      },
      {
        "lat": 40.34541,
        "lng": -121.597225,
        "id": 10158976
      },
      {
        "lat": 39.847395,
        "lng": -121.592679,
        "id": 10160553
      }
    ]
    }
    

    }

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    edited November 2020

    You have drawCallback: function (data,settings) {. The only parameter provided to drawCallback is settings. So you will need something like this:

    drawCallback: function () {
    ....
        google.maps.event.addListenerOnce(map, 'idle', function () { 
            var data = table.rows().data();
    
            // Get data with d3 JSON call. You can obviously use whatever you please to grab your data.
            d3.json(data, function ( d3Data ) {
                console.log( d3Data );
            });
    

    This uses rows().data() to get the full table data. The selector-modifier parameter can be used to control the data retrieved.

    Kevin

  • BigDataWarehouseBigDataWarehouse Posts: 23Questions: 10Answers: 0

    this worked without a problem

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    Sorry I was trying to help you with the d3.json() function. Thought you had the wrong number of parameters.

    You can use ajax.json() to get the JSON response from the ajax option.

    Kevin

  • BigDataWarehouseBigDataWarehouse Posts: 23Questions: 10Answers: 0

    no worries Kevin, I just needed to get the JSON response from the ajax option THANKS!

This discussion has been closed.