Cannot read JSON data coming from localstorage

ezG

QUESTION:
I don't understand why the 'contentType' parameter cannot be found. I have it spelled correctly. I'm assuming I'm not setting the parameters correctly.

Any ideas?

ERROR:
DataTables warning: table id=attachment - Requested unknown parameter 'contentType' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

JSON:

[{
    "_data$p$0": {
        "id": "AAMkADU4MzkxN2RmLTdiZS53ao=",
        "name": "somefile.xlsx",
        "contentType": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
        "size": 43069,
        "attachmentType": 0,
        "isInline": false
    }
}]

JAVASCRIPT:

Office.initialize = function (reason) {
    $(document).ready(function () {
        app.initialize();
        window.alert = function (message) { app.showNotification("DataTable", message); };
      
        

        var attachments = localStorage.getItem("Attachments");
        

        console.log(attachments);
        // Display Table
        $('#attachment').DataTable({
            data: attachments,
            columns: [
                { data: 'contentType' },
                { data: 'name' }
            ]
        });

    });
};

HTML:

            <table id="attachment" class="display">
                <thead>
                    <tr>                       
                        <th>Type</th>
                        <th>Name</th>
                    </tr>
                </thead>
            </table>

tangerine

Did you follow the link provided in the error message? It explains the necessary diagnostic steps.

ezG

Sorry, I accidentally clicked 'Yes'

The link did not resolve the problem.

Looking at the data, you can see that I have a valid string and that 'contentType' is populated with information.

colin

Hi @ezG,

If you look at the JSON, it's an object within an object. This example here should help.

Cheers,

Colin

ezG

That page was helpful, @colin. However, my JSON seems to be a case that is not covered.

You'll notice that _data$p$0 appears twice.

I'm assuming that _data$p$0[1].contentType would return the value in the second entry. However, I would want all the objects in the array read.

Pardon, I'm still new to this and I am going through the other entries, but I still haven't quite found this specific situation.

[
{"_data$p$0":{"id":"AAABEgAQAAlxqgOghb1IhaEe2nUdppg=","name":"image001.png","contentType":"image/png","size":437,"attachmentType":0,"isInline":true}},
{"_data$p$0":{"id":"AAABEgAQAN06/GANndFKi/QL0qhWn6s=","name":"image002.png","contentType":"image/png","size":2083,"attachmentType":0,"isInline":true}},
]

ezG

If it's of any help, the value I'm assigning to "data" is a JSON string. I'd used JSON.Stringify(0) on an object and stored it using localStorage.SetItem.

ezG

!!!WORKING!!!!

@colin, you got me on the right path. I modified my search and found this
https://m.datatables.net/forums/discussion/32107/how-to-load-an-array-of-json-objects-to-datatables

Here is the working code:

Office.initialize = function (reason) {
    $(document).ready(function () {
        app.initialize();
        window.alert = function (message) { app.showNotification("DataTable", message); };
      
        

        var attachments = JSON.parse(localStorage.getItem("ezAttachments"));
        

        console.log(attachments);
        // Display Table
        $('#attachment').DataTable({
            data: attachments, //I needed to use the JSON object not the string
            columns: [
                { data: '_data$p$0.contentType' }, // Now we reference the fields with dot notation
                { data: '_data$p$0.name' }
            ]
        });

    });
};