Problem loading JSON to table
Problem loading JSON to table
jutah
Posts: 6Questions: 1Answers: 0
I was able to get JSON data from a url to show up using the code below but when I try a different url with a slightly different JSON structure I'm unable to get the data to show up.
The two urls are:
http://statsapi.web.nhl.com/api/v1/teams/13?hydrate=roster
https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=33 (can't get this one to work)
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<script>
$(document).ready(function(){
$('#table_id').DataTable({
ajax: {
url: 'http://statsapi.web.nhl.com/api/v1/teams/13?hydrate=roster',
dataSrc: 'teams'
},
columns: [
{ data: 'roster.roster.[].person.fullName' },
{ data: 'name' },
]
});
});
</script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</html>
This is the code I tried to get the second url to work
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
</head>
<script>
$(document).ready(function(){
$('#table_id').DataTable({
ajax: {
url: 'https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=29',
dataSrc: 'data'
},
columns: [
{ data: '0.id'},
{ data: '0.goals'},
]
});
});
</script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</html>
Under the columns section in the second set of code I've tried all kinds of things such as: 'id' or 'data.0.id' or '[0].id' but nothing is working. I suspect it has to do with the JSON format. I've attached screenshots of the JSON tree structure for both urls. Any help is greatly appreciated!
This discussion has been closed.
Answers
Hi @jutah ,
This is how you would initialise DataTables here. I couldn't use the direct URL because the server is blocking the request due to a CORB response as shown here.
Hope that helps,
Cheers,
Colin
Hi Colin,
Thanks for the reply. I'm hoping to pull the data in automatically so I'm still searching for a solution. I don't see the CORB error you are seeing but maybe this is why it won't load and it's not the JSON structure?
I'm able to use the data in python so it seems the data is available to use, possibly I need to look for a solution other than datatables.
Thanks,
J
The CORB is likely due to the JS BIN environment. The JSON data structure, in your fist link, is not the easiest one to work with for Datatables but you should be able to make it work. Depending on the data you want to show you may need to use
ajax.dataSrcas a function to rearrange the JSON response. However if all you want is thepersoninfo then you can do something like this example:http://live.datatables.net/juhuwure/1/edit
Like Colin's example the ajax request is not there due to the CORB but the data is. You could set the
ajax.dataSrcto what the example has for thedataoption. But like I mentioned it depends on what info you want to show.Kevin
Hi Kevin,
Yeah I'm looking to display stat categories like games played and goals so I'm going to keep trying to get it to load automatically. I will see what I can do by putting a function in datasrc. Thanks for the message.
J
Hi Kevin,
After looking at your code more closely, it's the second JSON link I'm trying to get to work:
https://records.nhl.com/site/api/franchise-skater-records?cayenneExp=franchiseId=33
The JSON is formatted with data: and then all of the player data, so it's structured like this:
{"data":
[
{"id":16938,"assists":574,"firstName":"Patrick"},{"id":17007,"assists":746,"firstName":"Joe"},
{"id":17035,"assists":34,"firstName":"Jeff"}
]
}
I think if the data were listed as below it would be easier to work with
{"data":
{"moredata":
[
{"id":16938,"assists":574,"firstName":"Patrick"},{"id":17007,"assists":746,"firstName":"Joe"},
{"id":17035,"assists":34,"firstName":"Jeff"}
]
}
}
Actually that JSONJ response just as it is would work without defining
ajax.dataSrcand defining the columns like Colin's first example.http://live.datatables.net/towakine/1/edit
Kevin
Yes but is it possible to use the url instead of pasting the data into the data variable?
J
Hi Kevin,
Can you let me know if you get the same CORB response with this code?
http://live.datatables.net/nobujixo/1/edit
Thanks,
J
Yes, you can look in the browser's console for the error,
Not sure, I haven't tried outside of the JS BIN environment. Do you see the CORB error in your browser's console?
There may be some ajax options that might help. Or you can send an ajax request to a server script which gets the data and returns it as a JSON string.
Kevin