I have an external json file as follows (fake data);
JavaScript
x
23
23
1
{
2
"data": [
3
{
4
"id": "1",
5
"name": "Tiger Nixon",
6
"position": "System Architect",
7
"salary": "$320,800",
8
"start_date": "2011/04/25",
9
"office": "Edinburgh",
10
"extn": "5421"
11
},
12
{
13
"id": "2",
14
"name": "Garrett Winters",
15
"position": "Accountant",
16
"salary": "$170,750",
17
"start_date": "2011/07/25",
18
"office": "Tokyo",
19
"extn": "8422"
20
}
21
]
22
}
23
I call the table like below and, as expected it works;
JavaScript
1
8
1
let myPeople= $('#myPeople_index').DataTable({
2
ajax: '/user_public/people/data/myPeople.txt',
3
dataType: 'json',
4
"columns": [
5
{"data":"name"},
6
]
7
});
8
I want to change the array name in the json file to properties
and so have revised above as follows;
JavaScript
1
9
1
let myPeople= $('#myPeople_index').DataTable({
2
data: 'properties',
3
ajax: '/user_public/people/data/myPeople.txt',
4
dataType: 'json',
5
"columns": [
6
{"properties": "name"},
7
]
8
});
9
and change the datafile to;
JavaScript
1
5
1
{
2
"properties": [
3
{
4
"id": "1",
5
I get an error as follows;
JavaScript
1
3
1
Uncaught TypeError: Cannot read properties of undefined (reading 'length')
2
datatables.min.js:77
3
I have tried to read the man pages here https://datatables.net/manual/data/#Objects but I am certainly missing something. Any pointers appreciated.
Advertisement
Answer
JavaScript
1
9
1
let myPeople= $('#myPeople_index').DataTable({
2
data: 'properties',
3
ajax: '/user_public/people/data/myPeople.txt',
4
dataType: 'json',
5
"columns": [
6
{"properties": "name"},
7
]
8
});
9
should be
JavaScript
1
11
11
1
let myPeople= $('#myPeople_index').DataTable({
2
ajax: {
3
url: '/user_public/people/data/myPeople.txt',
4
dataSrc: 'properties'
5
}
6
dataType: 'json',
7
"columns": [
8
{"data": "name"},
9
]
10
});
11
data
is not a key in your data, it’s a specific property in the API.