Nested JSON array

johnmay

Hi

I have the following JSON returned from a Node.js API using MongoDB for storage...

[{"_id":"5c94a18257baff9d84d499c6","variationCategories":[{"variationCategoryDesc":"Damage caused by others","defaultOption":"true"},{"variationCategoryDesc":"Not included in package","defaultOption":"true"},{"variationCategoryDesc":"Not shown on issued drawings","defaultOption":"true"},{"variationCategoryDesc":"Design change","defaultOption":"true"}],"variationIdPrefix":"WKRVAR","variationIdSeed":"00001","variationPaidRetentionPeriodMonths":12,"variationPaidImageRetentionPeriodMonths":6,"variationCancelledRetentionPeriodMonths":12,"variationCancelledImageRetentionPeriodMonths":6}]

I want to display defaultOption and variationCategoryDesc in a datatable but get an Cannot read property 'length' of undefined error when attempting to do so using the following code...

$(document).ready(function() {
                    editor = new $.fn.dataTable.Editor( {
                        ajax: {
                            url: "http://localhost:3005/v1",
                            contentType: 'application/json',
                            type: "Get",
                            dataSrc: "variationCategories"
                        },
                        table: "#varCatTable",
                        fields: [ {
                                label: "",
                                name: "defaultOption"
                            }, {
                                label: "Description:",
                                name: "variationCategoryDesc"
                            }, {
                                label: "",
                                name: ""
                            }
                        ]
                    } );
                
                    // Activate an inline edit on click of a table cell
                    $('#varCatTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
                        editor.inline( this );
                    } );
                
                    $('#varCatTable').DataTable( {
                        dom: "Bfrtip",
                        paging: false,
                        info: false,
                        sDom: '',
                        ajax: {
                            url: "http://localhost:3005/v1",
                            contentType: 'application/json',
                            type: "Get",
                            dataSrc: "variationCategories"
                        },
                        columns: [
                            { data: "defaultOption" },
                            { data: "variationCategoryDesc", sortable: false },
                            { data: null, defaultContent: '', sortable: false }
                        ],
                        select: {
                            selector: 'td:first-child'
                        },
                        buttons: [
                            { extend: "create", editor: editor }
                        ]
                    } );
                } );

Anyone point me in the right direction on the value of dataSrc?

kthorngren

Cannot read property 'length' of undefined

Could mean a lot of things. Looks like your columns.data matches the JSON structure and the ajax.dataSrc is correct.

My initial thought is the HTML table structure doesn't match the columns.data config. Do you have three columns defined in your HTML table?

Kevin

johnmay

Hi Kevin, yes. This is my table in HTML...

<table id="varCatTable" class="table table-striped table-bordered responsive nowrap" style="width: 100%">
                                                                                    <thead>
                                                                                        <tr>
                                                                                            <th></th>
                                                                                            <th>Description</th>
                                                                                            <th></th>
                                                                                        </tr>
                                                                                    </thead>

colin

Hi @johnmay ,

That third Editor field on line 17 is probably the cause - it's defining an editable field but not saying how it can be written back. If you remove that, hopefully that'll do the trick.

Cheers,

Colin

johnmay

Thanks for your response @colin

I tried removing that column but still the same error. I've got that there to add a delete images button once I've managed to get past this problem.

I changed the fields temporarily to use values from outside of the nested array and it worked OK so this looks like an issue parsing the JSON response.

This is the response I get from the API form the browser tools...

[{_id: "5c94a18257baff9d84d499c6",…}]
0: {_id: "5c94a18257baff9d84d499c6",…}
variationCancelledImageRetentionPeriodMonths: 6
variationCancelledRetentionPeriodMonths: 36
variationCategories: [{variationCategoryDesc: "Damage caused by others", defaultOption: "true"},…]
0: {variationCategoryDesc: "Damage caused by others", defaultOption: "true"}
defaultOption: "true"
variationCategoryDesc: "Damage caused by others"
1: {variationCategoryDesc: "Not included in package", defaultOption: "true"}
defaultOption: "true"
variationCategoryDesc: "Not included in package"
2: {variationCategoryDesc: "Not shown on issued drawings", defaultOption: "true"}
defaultOption: "true"
variationCategoryDesc: "Not shown on issued drawings"
3: {variationCategoryDesc: "Design change", defaultOption: "true"}
defaultOption: "true"
variationCategoryDesc: "Design change"
variationIdPrefix: "WKRVAR"
variationIdSeed: "88888"
variationPaidImageRetentionPeriodMonths: 6
variationPaidRetentionPeriodMonths: 12
_id: "5c94a18257baff9d84d499c6"

And this is the model defined in the API...

const variationsModel = mongoose.model("variations", {
    "variations": [
        {
        "variationID": String,
        "custID": String,
        "projID": String,
        "variationTitle": String,
        "variationDesc": String,
        "variationStatus": String,
        "variationChargeable": String,
        "variationCost": String,
        "requireMaterial": String,
        "variationRequestor": String,
        "variationCreationDate": String,
        "variationImages": [
            {
            "imageId": String
            }
        ],
        "variationCategory": String
        }
    ]
});

johnmay

Sorry, wrong model posted before. This is the one...

const settingsModel = mongoose.model("company-settings", {
    "_id": {
        "$oid": String
      },
      "variationCategories": [
        {
          "variationCategoryDesc": String,
          "defaultOption": String
        }
      ],
      "variationIdPrefix": String,
      "variationIdSeed": String,
      "variationPaidRetentionPeriodMonths": Number,
      "variationPaidImageRetentionPeriodMonths": Number,
      "variationCancelledRetentionPeriodMonths": Number,
      "variationCancelledImageRetentionPeriodMonths": Number
});

allan

Can you use the debugger to give me a trace please - click the Upload button and then let me know what the debug code is.

Thanks,
Allan

johnmay

Thanks Allan, I've uploaded and sent you the debug code via private message.

allan

Perfect - thanks. Spotted the problem, and actually can see it in the above JSON, I missed it yesterday. The data being returned is wrapped in an array:

[{
    "_id": "5c94a18257baff9d84d499c6",
    "variationCategories": [{
        "variationCategoryDesc": "Damage caused by others",
        "defaultOption": "true"
    }, {
        "variationCategoryDesc": "Not included in package",
        "defaultOption": "true"
    }, {
        "variationCategoryDesc": "Not shown on issued drawings",
        "defaultOption": "true"
    }, {
        "variationCategoryDesc": "Design change",
        "defaultOption": "true"
    }],
    "variationIdPrefix": "WKRVAR",
    "variationIdSeed": "00001",
    "variationPaidRetentionPeriodMonths": 12,
    "variationPaidImageRetentionPeriodMonths": 6,
    "variationCancelledRetentionPeriodMonths": 12,
    "variationCancelledImageRetentionPeriodMonths": 6
}]

If you are able to return just the inner object, that would work. If not use dataSrc: '0.variationCategories'.

Allan

johnmay

Fixed and I can move on! Thank you very much for your time on this. Much appreciated.