datafield is undefined in certain sequence

[EatonParticipant]

Hello, I have been struggling to get my code to work for some time now, i finally have it functioning correctly, but the reason it doesn’t work eludes me.
I have 3 sources of data:

var productList = [{ "id": 11, "family": 1, "name": "Product_A"}, { "id": 14, "family": 1, "name": "Product_B"}];
var familyList = [{"id": 1, "name": "Family_A"},{"id": 2, "name": "Family_B"}];
var testCycle = {"startDate": "2016-03-08", "product": 11, "endDate": "2016-09-30", "name": "testCycleName", "note": "a Release Cycle.", "version": "xxx", "id" : "394d5ca9-e16e-4eb5-9a68-10ccfa8a9845"};

I then put this json values into their respective sources like so:

$(document).ready(function(){
    $(function(){
        var familySource =
        {
             dataType: "json",
             dataFields: [
                 { name: 'id' },
                 { name: 'name' },
             ],
             localData: familyList
        };
        var familyAdapter = new $.jqx.dataAdapter(familySource, {
             autobind = true
        });
        var productSource =
        {
             dataType: "json",
             dataFields: [
                 { name: 'id' },
                 { name: 'name' },
                 { name: 'family' , value: 'family', values:{ source: familyAdapter.records, value: 'id', name: 'name' }},
             ],
             localData: productList
        };
        var productAdapter = new $.jqx.dataAdapter(productSource, {
             autobind = true
        });

        var source =
        {
             dataType: "json",
             dataFields: [
                 { name: 'id' },
                 { name: 'name' },
                 { name: 'product' , value: 'product', values:{ source: productAdapter.records, value: 'id', name: 'name' }},
                 { name: 'family' , value: 'product', values:{ source: productAdapter.records, value: 'id', name: 'family' }},
                 { name: 'version' },
                 { name: 'startDate' },
                 { name: 'endDate' },
                 { name: 'note' },
             ],
             localData: testCycle
        };
        var dataAdapter = new $.jqx.dataAdapter(source, {
             autoBind: true
        });
    });
});

When this code executes, the “dataAdapter” variable ‘records’ array has a single object, as expected, but the ‘family’ variable is set to “undefined”
I have no idea why this doesn’t work. However, I can tell you that it does work when “source” is replaced with:

var source =
{
    dataType: "json",
    dataFields: [
        { name: 'id' },
        { name: 'name' },
        { name: 'family' , value: 'product', values:{ source: productAdapter.records, value: 'id', name: 'family' }},
        { name: 'product' , value: 'product', values:{ source: productAdapter.records, value: 'id', name: 'name' }},
        { name: 'version' },
        { name: 'startDate' },
        { name: 'endDate' },
        { name: 'note' },
    ],
    localData: testCycle
};

Any insight would be valuable.

[HristoParticipant]

Hello Eaton,

I edit your example. Just add new datafields (“meaningful” names).
Otherwise, the DataAdapter replace one datafield value over another.

$(document).ready(function () {
    var productList = [{ "id": 11, "familyID": 1, "name": "Product_A" }, { "id": 14, "familyID": 1, "name": "Product_B" }];
    var familyList = [{ "id": 1, "name": "Family_A" }, { "id": 2, "name": "Family_B" }];
    var testCycle = { "startDate": "2016-03-08", "productID": 11, "endDate": "2016-09-30", "name": "testCycleName", "note": "a Release Cycle.", "version": "xxx", "id": "394d5ca9-e16e-4eb5-9a68-10ccfa8a9845" };
    
    var familySource =
    {
        datatype: "json",
        datafields: [
            { name: 'id' },
            { name: 'name' },
        ],
        localdata: familyList
    };
    var familyAdapter = new $.jqx.dataAdapter(familySource, { autoBind: true });
    
    var productSource =
    {
        dataType: "json",
        dataFields: [
            { name: 'id' },
            { name: 'name' },
            // name - determines the field's name.
            // value - the field's value in the data source.
            // values - specifies the field's values.
            // values.source - specifies the foreign source. The expected value is an array.
            // values.value - specifies the field's name in the foreign source. 
            // values.name - specifies the field's value in the foreign source. 
            { name: 'fieldNameFamily', value: 'familyID', values: { source: familyAdapter.records, value: 'id', name: 'name' } },
            { name: 'familyID' }
        ],
        localData: productList
    };
    var productAdapter = new $.jqx.dataAdapter(productSource, { autoBind: true });
    
    var source =
    {
        dataType: "json",
        dataFields: [
            { name: 'id' },
            { name: 'name' },
            { name: 'product', value: 'productID', values: { source: productAdapter.records, value: 'id', name: 'name' } },
            { name: 'family', value: 'productID', values: { source: productAdapter.records, value: 'id', name: 'fieldNameFamily' } },
            { name: 'productID' },
            { name: 'version' },
            { name: 'startDate' },
            { name: 'endDate' },
            { name: 'note' },
        ],
        localData: testCycle
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
    var record = dataAdapter.records[0];
    alert('endDate: ' + record.endDate + '\nfamily: ' + record.family + '\nproduct: ' + record.product+ '\nnote: ' + record.note);
});

You could find this example in our jseditor:
https://www.jseditor.io/?key=dataadapter-example

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[EatonParticipant]

Thank you very much!!
This helps me quite a lot.

Just as a little bit of feedback: I see my source was changed, so what i really wanted was something more like:

$(document).ready(function () {
    var productList = [{ "id": 11, "family": 1, "name": "Product_A" }, { "id": 14, "family": 1, "name": "Product_B" }];
    var familyList = [{ "id": 1, "name": "Family_A" }, { "id": 2, "name": "Family_B" }];
    var testCycle = { "startDate": "2016-03-08", "product": 11, "endDate": "2016-09-30", "name": "testCycleName", "note": "a Release Cycle.", "version": "xxx", "id": "394d5ca9-e16e-4eb5-9a68-10ccfa8a9845" };
    
    var familySource =
    {
        datatype: "json",
        datafields: [
            { name: 'id' },
            { name: 'name' },
        ],
        localdata: familyList
    };
    var familyAdapter = new $.jqx.dataAdapter(familySource, { autoBind: true });
    
    var productSource =
    {
        dataType: "json",
        dataFields: [
            { name: 'id' },
            { name: 'name' },
            // name - determines the field's name.
            // value - the field's value in the data source.
            // values - specifies the field's values.
            // values.source - specifies the foreign source. The expected value is an array.
            // values.value - specifies the field's name in the foreign source. 
            // values.name - specifies the field's value in the foreign source. 
            { name: 'fieldNameFamily', value: 'family', values: { source: familyAdapter.records, value: 'id', name: 'name' } },
            { name: 'family' }
        ],
        localData: productList
    };
    var productAdapter = new $.jqx.dataAdapter(productSource, { autoBind: true });
    
    var source =
    {
        dataType: "json",
        dataFields: [
            { name: 'id' },
            { name: 'name' },
            { name: 'productName', value: 'product', values: { source: productAdapter.records, value: 'id', name: 'name' } },
            { name: 'familyName', value: 'product', values: { source: productAdapter.records, value: 'id', name: 'fieldNameFamily' } },
            { name: 'product' },
            { name: 'version' },
            { name: 'startDate' },
            { name: 'endDate' },
            { name: 'note' },
        ],
        localData: testCycle
    };
    var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true });
    var record = dataAdapter.records[0];
    alert('endDate: ' + record.endDate + '\nfamily: ' + record.familyName + '\nproduct: ' + record.productName+ '\nnote: ' + record.note);
});

[Author]

Posts