How would i go about getting this data into columns? - Fiddle Included

SamuelNZ · November 2015

<script>        
$(document).ready(function() {
    $('#example').DataTable( {
        "ajax":
        
    {
        "url":"http://gaming.adduce.co.nz:8888/getPlayerKillsHistory?ids=76561198061378579",
        "cache": true,
        "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){
        return_data.push()
      }
      console.log (json);
      return return_data;
}
  },
  "columns"    : [
    {'data': 'PlayersKillsHistory.PlayersKillsHistory.76561198061378579.deaths.idKiller'},
    {'data': 'PlayersKillsHistory.PlayersKillsHistory.76561198061378579.deaths.dateTime'},
    {'data': 'PlayersKillsHistory.PlayersKillsHistory.76561198061378579.deaths.killerName'}
    ]
    });});
    
</script>

<table id="example" class="display" width="100%">
<thead><tr>
<th>Killers SteamID</th><th width="200px">Name</th><th>Date/Time</th>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
<th>Killers SteamID</th><th width="200px">Name</th><th>Date/Time</th>
</tr></tfoot>
</table>

Okay, So i was able to turn PlayersKillsHistory into an Array as required by DT, But now i'm having trouble getting the data into the columns. The screenshot below shows the structure:

View post on imgur.com

SamuelNZ · November 2015

Created a JSFiddle: http://jsfiddle.net/n3p0mcto/1

jLinux · November 2015

Fiddle doesnt really help, since the AJAX source returns no data

Hers one with a change I made, but the error being thrown is that its not finding anything from the ajax src

SamuelNZ · November 2015

Hey again jLinux!

I tried your changes and now its throwing:

Uncaught TypeError: Cannot read property 'length' of undefined

jLinux · November 2015

Lol... Thats what im saying...

but the error being thrown is that its not finding anything from the ajax src

$ curl -i -X GET --data 'ids=76561198061378579' http://gaming.adduce.co.nz:8888/getPlayerKillsHistory
HTTP/1.1 400 Bad Request
Date: Wed, 11 Nov 2015 04:28:44 GMT
Connection: close
Server: bidule
Accept-Ranges: bytes
Content-Type: application/json
Access-Control-Allow-Origin: *
Content-Length: 0
Last-Modified: Wed, 11 Nov 2015 04:28:44 GMT

$

Thus, your ajax source isnt returning anything

SamuelNZ · November 2015

<html>
<head>

<script type="text/javascript" src="https://cdn.datatables.net/s/dt/jq-2.1.4,dt-1.10.10/datatables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/ju/dt-1.10.10/datatables.min.css"/>
 </head>
 <body>
<script>        
$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": {
            "url": "http://gaming.adduce.co.nz:8888/getPlayerKillsHistory",
            "data": {
                ids: '76561198061378579'
            }
        },
        "cache": true,
        "dataSrc": function (json) {
            var return_data = [];
            for(var i=0;i< json.length; i++){
                return_data.push();
            }
            console.log (json);
            return return_data;
        },
        "columns": [
            {'data': 'idKiller'},
            {'data': 'dateTime'},
            {'data': 'killerName'}
        ]
    });
});

    
</script>
  
<table id="example" class="display" width="100%">

<thead>
<tr>
<th>Killers SteamID</th><th width="200px">Name</th><th>Date/Time</th>
</tr>
</thead>

<tbody></tbody>

<tfoot>
<tr>
<th>Killers SteamID</th><th width="200px">Name</th><th>Date/Time</th>
</tr>
</tfoot>

</table>

</body>
</html>

That will run if you save it as HTML

SamuelNZ · November 2015

Oh, Is that because its missing a question mark?

SamuelNZ · November 2015

It needs to be in exactly this format:

http://gaming.adduce.co.nz:8888/getPlayerKillsHistory?ids=76561198041352960

Or it responds with bad request.

jLinux · November 2015

Oh, weird, ive always been able to use the ajax.data to pass the data.

I changed the ajax.url back to the one you pasted above, and heres the weird part (def server side related), when I visit that URL in the browser, its all populated just fine, when I run the JSFiddle, and view the content of the AJAX request, heres the result: http://d.pr/i/qWES

So that error Cannot read property 'length' of undefined is because its empty, it doesnt see any content to pull

SamuelNZ · November 2015

Edit: Nevermind i misunderstood. I'm not sure how to fix this :/

Why is it returning empty even with a valid id?

jLinux · November 2015

lol, that has nothing to do with DataTables, thats totally server related. I can't see that code

SamuelNZ · November 2015

The server has nothing to do with how the client is handling the data.. It will always give out the entire array.

Its blank because of something happening in that code.

http://gaming.adduce.co.nz:8888/getPlayerKillsHistory?ids=76561198041352960

Will always give out:

{
    "PlayersKillsHistory": [
        {
            "76561198041352960": {
                "deaths": [
                    {
                        "dateTime": "1447122630624",
                        "idKiller": "76561198040013930",
                        "killerName": "Liam"
                    },
                    {
                        "dateTime": "1446986710024",
                        "idKiller": "76561197987727291",
                        "killerName": "Hazard"
                    },
                    {
                        "dateTime": "1446985828393",
                        "idKiller": "76561198055782576",
                        "killerName": "monolith"
                    },
                    {
                        "dateTime": "1446985231489",
                        "idKiller": "76561198061378579",
                        "killerName": "ApexGlow"
                    },
                    {
                        "dateTime": "1446983387234",
                        "idKiller": "76561198040295701",
                        "killerName": "stand alone"
                    },
                    {
                        "dateTime": "1446960398014",
                        "idKiller": "76561198040013930",
                        "killerName": "Liam"
                    }
                ],
                "kills": [
                    {
                        "dateTime": "1446987390905",
                        "idKilled": "76561198040013930",
                        "killedName": "Liam"
                    }
                ]
            }
        }
    ]
}

no matter how you ask for it, So it is something to do with data tables.

SamuelNZ · November 2015

DataTables, again, is passing things into my code where i haven't asked for them:

{
    "PlayersKillsHistory": [
        {
            "76561198041352960&_=1447235343130": {
                "deaths": [
                ],
                "kills": [
                ]
            }
        }
    ]
}

Where is it getting &_=1447235343130 from? That shouldn't be in the request and it would be working if it wasn't doing this.

It looks like epoch time? What is epoch time doing in my request?

Edit:

Datatables is ignoring

    "cache": true,

jLinux · November 2015

Looks like the code on the server gets confused when the ajax.cache is set, I turned it off and used the ajax.data, as opposed to adding the ids on the ajax.url.

You're also trying to specify the dataSrc outside of the ajax, keep in mind its ajax.dataSrc, meaning it goes inside the ajax settings..

Also, you're trying to return an array from the ajax.dataSrc, I dont think thats right... the dataSrc is supposed to be the root of where the data is pulled from, and I tried passing something like PlayersKillsHistory[0].76561198041352960.deaths, and it didnt work (As I expected)

http://jsfiddle.net/n3p0mcto/5/

SamuelNZ · November 2015

<script>        
$(document).ready(function() {
    $('#example').DataTable( {
            "ajax": {
            "url": "http://gaming.adduce.co.nz:8888/getPlayerKillsHistory",
            "data": {
                ids: '76561198041352960'
            },
            "cache": true,
        },
        "dataSrc": function (json) {
            var return_data = [];
            for(var i=0;i< json.length; i++){
                return_data.push();
            }
            console.log (json);
            return return_data;
        },
        "columns": [
            {'data': 'deaths.idKiller'},
            {'data': 'deaths.dateTime'},
            {'data': 'deaths.killerName'}
        ]
    });
});

    
</script>

Is returning the array properly and honoring cache, But still not populating the table.

SamuelNZ · November 2015

So that means

Cannot read property 'length' of undefined

Isn't caused by the empty array, Hmm, i wonder whats wrong.

SamuelNZ · November 2015

"Also, you're trying to return an array from the ajax.dataSrc, I dont think thats right... the dataSrc is supposed to be the root of where the data is pulled from, and I tried passing something like PlayersKillsHistory[0].76561198041352960.deaths, and it didnt work (As I expected)"

Allan is the one who suggested using dataSrc as a function.

SamuelNZ · November 2015

<script>        
$(document).ready(function() {
    $('#example').DataTable( {
            "ajax": {
            "dataSrc": function (json) {
            var return_data = [];
            console.log (json);
            return return_data;},
            "url": "http://gaming.adduce.co.nz:8888/getPlayerKillsHistory",
            "data": {ids: '76561198041352960'},
            "cache": true,
        },
        "columns": [
            {'data': 'deaths.idKiller'},
            {'data': 'deaths.dateTime'},
            {'data': 'deaths.killerName'}
        ]
    });
});

    
</script>

So.. Why isn't this working.. Looks perfect to me.. The length issue is solved, the array is present, no errors.. but still "No data available in table"

allan · November 2015

See this thread where the same issue is discussed.

Allan

SamuelNZ · November 2015

Thank you Allan! That worked great!

So it always was a simple task :P Knew i could expect simplicity from DT, I should have been more specific about what i was wanting to do.

How would i go about getting this data into columns? - Fiddle Included

How would i go about getting this data into columns? - Fiddle Included

Answers

Howdy, Stranger!

Categories

DataTables

How would i go about getting this data into columns? - Fiddle Included

How would i go about getting this data into columns? - Fiddle Included

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables