Unable to Load Complex JSON Object

Unable to Load Complex JSON Object

toriachttoriacht Posts: 20Questions: 5Answers: 1

Hi,

Apologies for the beginner's question I am unable to get a complex JSON object to load.It is a JSON Object with many JSON arrays. I hope to use each array to load a different table using a different dataSrc option for each table/. I have gone through many examples but i am still stuck. Cut and paste sample from json file pasted at the bottom. My JS is as follows

<script>
    $(document).ready(function() {
        $('#example21').DataTable( {
            "processing": true,
            "ajax": "data/myhouse.json",
            "dataSrc":"myhouse",
            "columns": [
                { "data": "name" },
                { "data": "date" },
                { "data": "amount" },
                { "data": "address" }
            ]
        } );
    } );

</script>

My HTML is as follows

<table id="example21" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>name</th>
        <th>date</th>
        <th>amount</th>
        <th>address</th>
    </tr>
    </thead>
    <tfoot>
    <tr>
        <th>name</th>
        <th>date</th>
        <th>amount</th>
        <th>address</th>
    </tr>
    </tfoot>
</table>

Any help much appreciated.

The ERROR is:

jquery.dataTables.js:3214 Uncaught TypeError: Cannot read property 'length' of undefined
    at jquery.dataTables.js:3214
    at Object.success (jquery.dataTables.js:2380)
    at j (jquery-2.1.0.min.js:2)
    at Object.fireWith [as resolveWith] (jquery-2.1.0.min.js:2)
    at x (jquery-2.1.0.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery-2.1.0.min.js:4)
(anonymous) @   jquery.dataTables.js:3214
success @   jquery.dataTables.js:2380
j   @   jquery-2.1.0.min.js:2
fireWith    @   jquery-2.1.0.min.js:2
x   @   jquery-2.1.0.min.js:4
(anonymous) @   jquery-2.1.0.min.js:4

My JSON object is of the following format

{
    "myhouse": [
        {
            "name": "nameywamey",
            "date": "2018-01-12",
            "amount": 500,
            "address": "mystreet"
            
        },
        {
            "name": "nameywamey",
            "date": "2018-01-11",
            "amount": 3000,
            "address": "mystreet"
            
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 3935,
            "address": "mystreet"
            
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 11,
            "address": "mystreet"
            
        },
        {
            "name": "nameywamey",
            "date": "2018-01-12",
            "amount": 11,
            "address": "mystreet"
            
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 11,
            "address": "mystreet"
        
        }
    
    ],
    "yourhouse": [
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 23,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 21,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 56,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 65,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 56,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-12 08:22:58",
            "amount": 55,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 55,
            "address": "mystreet"
        }
    ],
    "house11": [
        {
            "name": "nameywamey",
            "date": "2018-01-12 16:09:09",
            "amount": 55,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 37,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-11",
            "amount": 48,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 11,
            "address": "mystreet"
        }
    ],
    "house22": [
        {
            "name": "nameywamey",
            "date": "2018-01-11",
            "amount": 11,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-11",
            "amount": 11,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 11,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 11,
            "address": "mystreet"
        }
    ],
    "house51": [
        {
            "name": "nameywamey",
            "date": "2018-01-11",
            "amount": 12,
            "address": "mystreet"
        }
    ],
    "house52": [
        {
            "name": "nameywamey",
            "date": "2018-01-10",
            "amount": 12,
            "address": "mystreet"
        },
        {
            "name": "nameywamey",
            "date": "2018-01-12",
            "amount": 89,
            "address": "mystreet"
        }
    ]
}

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,246Questions: 26Answers: 4,929
    Answer ✓

    The problem is that the ajax.dataSrc config belongs in the ajax config. For example:

      "ajax": {
        "url": "data/myhouse.json",
        "dataSrc": "myhouse"
      }
    

    The ease of returning all the data for each table and using just a subset might be ok depending on the size of the response. Depending on resource usage, etc you may want to just return the specific data for each table.

    Kevin

  • toriachttoriacht Posts: 20Questions: 5Answers: 1

    Perfect!

    Thank's a million for the quick response. Currently I can;t modify the server side so I'm stuck with it for now... the response size is small so it's bearable but this was my follow on question.

    I did not know how to properly ask it until i knew how to do this one so i will post a separate question rather than combining two questions into this one.

    Thanks again, it's much appreciated...

This discussion has been closed.