Change from Google Spreadsheat to JSON

kulli

I'm using dataTables just to display data with the possibilits to search and sort. Based on an EXCEL with 3 colums each with text. Until July it was working fine (first Google Docs, after changed to Google Spreadsheet).
Now I converted the EXCEL to a JSON file and changed just this lines:
"sAjaxSource": "data.json", and "sAjaxDataProp": form "feed.entry" to different values but always I get no entry

this is my script:

<script>
$(document).ready(function() {
    $('#repertoire').DataTable( {
       "paging": true,
       "ordering": true,
       "searching": true,
       
       "language": {
            "lengthMenu": " _MENU_ Einträge anzeigen",
            "zeroRecords": "Kein Eintrag gefunden",
            "info": "Seite _PAGE_ von _PAGES_",
            "infoEmpty": "Kein Eintrag gefunden",
            "infoFiltered": "(filtered from _MAX_ total records)",
            paginate: {
                first:      "Erster",
                previous:   "zurück",
                next:       "weiter",
                last:       "Letzter"
            },
            search:         "Suche&nbsp;:",
        },
       "info": true,
        "sAjaxDataProp": "data",
        "sAjaxSource": "data.json",
        "aoColumns": [  
        { "mDataProp": "gsx$name.$t" },
        { "mDataProp": "gsx$strasse.$t" },
        { "mDataProp": "gsx$ort.$t" },
        ]
        
    } );
        $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
        $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
    } );
} );
</script>

the JSON:
[[{"name":"Name 1","strasse":"Straße 1","ort":"Ort 1"},{"name":" Name 2","strasse":" Straße 2","ort":" Ort 2"},{"name":" Name 3","strasse":" Straße 3","ort":" Ort 3"},]]

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

It looks like you have a very old version of DataTables there looking at those Ajax parameters. I'm not clear what your problem is but it would be worth updating to the latest.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kulli

Hi Colin, I'm using DataTables 1.10.18 with bootstrap 4
the link:
https://www.festklang.at/reptest.php

kthorngren

Replace these options as they are legacy for older Datatables versions:

        "sAjaxDataProp": "data",
        "sAjaxSource": "data.json",

With ajax and ajax.dataSrc. Set the dataSrc to read form a plain array. Like the second example in the docs.

Kevin

kulli

Hi kthorngren - no entry

kthorngren

No sure what "no entry" means but your test case still has the old options.
Do you get alert messages or errors in the browser's console?

What changes did you make?

Kevin

kulli

No, no errors, only the message that that the table is empty.

here is the link with the change to the new: https://www.festklang.at/reptest1.php
this causes now to a warning : Request unknown.

kthorngren

Did you look at the troubleshooting steps at the link provided in the error?
http://datatables.net/tn/4

You have configured columns.data like this:

        "aoColumns": [  
        { "mDataProp": "gsx$titel.$t" },
        { "mDataProp": "gsx$komponist.$t" },
        { "mDataProp": "gsx$genre.$t" },
        ]

It doesn't match the data structure in the JSON response, which looks like this:

{
        "titel": "Abendempfindung",
        "komponist": "W.A.Mozart",
        "genre": "Klassik"
    }

It should look more like this:

  "columns": [
    { "data": "titel" },
    { "data": "komponist" },
    { "data": "genre" }
  ]

You can continue to use the legacy form of the options but its suggested you convert to the current form of the options. This conversion guide has more info.

Kevin

kulli

Hi Kevin, thanks a lot for your help - I think I'm too stupid
I have no different versions:

https://www.festklang.at/reptest.php
"sAjaxDataProp": "data",
"sAjaxSource": "https://www.festklang.at/repertoire.json",
"columns": [
{ "data": "titel" },
{ "data": "komponist" },
{ "data": "genre" }
]
https://www.festklang.at/reptest1.php
"ajax": {
"url": "https://www.festklang.at/repertoire.json",
"dataSrc": "data"
},
"aoColumns": [
{ "mDataProp": "titel" },
{ "mDataProp": "komponist" },
{ "mDataProp": "genre" }
]
I also updated to the latest version
Never mind what I try the result is the same : no entry found

in debugger I get an error in both versions:
Uncaught TypeError: k is undefined jquery.dataTables.min.js:62:337

kthorngren

The problem is you have an array within an array, for example:

[
    [
    {
        "titel": "Abendempfindung",
        "komponist": "W.A.Mozart",
        "genre": "Klassik"
    },
.....
{
        "titel": "Zwischen Simmering und Favoriten",
        "genre": "Volkslieder - Wienerlieder - Traditionals"
    }
    ]
]

In this case try using ajax.dataSrc as a function so you can return the inner array. Something like this:

    dataSrc: function ( json ) {
       return json[0];
    }

Also it looks like some of your records are missing the komponist object. You will need to use defaultContent to specify what to display when this is missing., Something like this:

"columns": [
{ "data": "titel" },
{ "data": "komponist", defaultContent: "" },
{ "data": "genre" }
]

Kevin

kulli

Thank you very much - you made my day
Its working perfect !!!!!!!!!