referencing json data in datatables - howto

Question

I have an external json file as follows (fake data);

{
 "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    }
   ]
}

I call the table like below and, as expected it works;

    let myPeople=      $('#myPeople_index').DataTable({                  
        ajax:           '/user_public/people/data/myPeople.txt',
        dataType:       'json', 
        "columns": [
            {"data":"name"},
        ]   
    });

I want to change the array name in the json file to properties and so have revised above as follows;

    let myPeople=      $('#myPeople_index').DataTable({     
        data:           'properties',   
        ajax:           '/user_public/people/data/myPeople.txt',
        dataType:       'json', 
        "columns": [
            {"properties": "name"},
        ]   
    });

and change the datafile to;

{
 "properties": [
    {
      "id": "1",

I get an error as follows;

Uncaught TypeError: Cannot read properties of undefined (reading 'length') 
datatables.min.js:77

I have tried to read the man pages here https://datatables.net/manual/data/#Objects but I am certainly missing something. Any pointers appreciated.

Doesn't your browser block your attempted local text file access with a CORS error, for the example which is working already for you? (I'm surprised it works). — andrewJames
– andrewJames, Commented Aug 17, 2022 at 1:23
Also, side note: Your dataType: 'json' option will be ignored, since it's not inside the ajax option. I would expect to see ajax: { ajax options here }, ... . — andrewJames
– andrewJames, Commented Aug 17, 2022 at 1:23
That's not valid JSON. The description of the JSON tag: "Do not use this tag for native JavaScript objects or JavaScript object literals. Before you ask a question, validate your JSON using a JSON validator such as JSONLint (jsonlint.com)." — user16540390
– user16540390, Commented Aug 17, 2022 at 2:21
@jabaa I have removed the comma on line 19. That was me shortening the sample for a long list. — spreaderman
– spreaderman, Commented Aug 18, 2022 at 0:26

score 1 · Accepted Answer · 2022-08-18 00:48:10Z

1

let myPeople=      $('#myPeople_index').DataTable({     
        data:           'properties',   
        ajax:           '/user_public/people/data/myPeople.txt',
        dataType:       'json', 
        "columns": [
            {"properties": "name"},
        ]   
    });

should be

let myPeople=      $('#myPeople_index').DataTable({     
        ajax: {
          url: '/user_public/people/data/myPeople.txt',
          dataSrc: 'properties'
        }
        dataType:       'json', 
        "columns": [
            {"data": "name"},
        ]   
    });

data is not a key in your data, it's a specific property in the API.

edited Aug 18, 2022 at 0:48

answered Aug 18, 2022 at 0:34

user16540390

Sign up to request clarification or add additional context in comments.

1 Comment

spreaderman Over a year ago

Thank you Jabaa. Read more and learnt more. Silly mistakes but thanks.

Collectives™ on Stack Overflow

referencing json data in datatables - howto

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related