How to bind nested JSON array

Posted by: arulventhan.palanimuthu on 20 October 2017, 12:38 am EST

    • Post Options:
    • Link

    Posted 20 October 2017, 12:38 am EST

    hai ,

    i try to bind nested json array to an dataview i followed the following link,

    https://www.grapecity.com/en/demos/spread/JS/ViewsDemo/#/demos/SocialTimeline

    its bind as i expected.but i have and data as like follws

    var data=[

    {

    city: null,

    createdDate: “0001-01-01T00:00:00”,

    createdUser: null,

    Fields: [{“Id”:0,“Name”:“Field01”,“Value”:“01”},

    {“Id”:1,“Name”:“field02”,“Value”:“02”},

    {“Id”:2,“Name”:“Field03”,“Value”:“03”},

    {“Id”:3,“Name”:“Field04”,“Value”:“04”}

    ]

    },

    {

    city: null,

    createdDate: “0001-01-01T00:00:00”,

    createdUser: null,

    Fields: [{“Id”:0,“Name”:“Field11”,“Value”:“11”},

    {“Id”:1,“Name”:“field12”,“Value”:“12”},

    {“Id”:2,“Name”:“Field13”,“Value”:“13”},

    {“Id”:3,“Name”:“Field14”,“Value”:“14”}

    ]

    }

    ];

    In this i need bind all data in different columns

    i used for loop as follows to add columns

    var FieldHeader=

    [{FieldName:“Custom1”},{FieldName:“Custom2”},{FieldName:“Custom3”},{FieldName:“Custom4”}]

    for (var i = 0; i < $scope.FieldHeader.length; i++) {

    var Cus = $scope.FieldHeader[i];

    n = {

    id: Cus.FieldName + i, caption: Cus.FieldName, dataField: ‘Fields[’ + i + ‘]’ + Cus.FieldName,

    width: _width,

    presenter: ‘

    {{~it.Fields:value:index}}{{=value.Value }}{{~}}


    }

    columns.push(n);

    }

    in above loop it binds only the value of data.Fields[0].

    for row 1, column from Custom1 to Custom4 same value as 01

    and for row 2, column from Custom1 to Custom4 same value as 11

    help me how to bind all values from data.Fields[0] to data.Fields[3].

    thanks ,

    Arulventhan NP

  • Posted 26 October 2017, 10:02 pm EST

    Hello,

    Apologies for the delayed response first of all. We tried to create a sample for your issue but unable to bind all values from data.Fields[0] to data.Fields[3]. Hence, we have escalated your issue to the concerned team for further investigation.

    We will get back to you as soon as we hear anything from them.

    Tracking id for your issue is #248417

    Thanks,

    Reeva

  • Posted 30 October 2017, 2:30 pm EST

    Hello,

    Please try the following code:-

    var FieldHeader = [{ FieldName: "Custom1" }, { FieldName: "Custom2" }, { FieldName: "Custom3" }, { FieldName: "Custom4" }]
      //use a hidden column to refere the array data.
      var columns = [{ id: "fields", dataField: 'Fields', visible: false }];
      for (var i = 0; i < FieldHeader.length; i++) {
          var Cus = FieldHeader[i];
          var id = Cus.FieldName + i;
          var localIndex = i; //fix Closure issue
          n = {
              id: id,
              caption: Cus.FieldName,
              dataField: '',
              width: 200,
              presenter: '{{=it.fields[' + localIndex + '].Value}}'
          }
          columns.push(n);
      }
    
      var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout());
    

    Hope it helps.

    Thanks,

    Reeva

  • Posted 30 October 2017, 7:31 pm EST

    hello Reeva,

    Thanks its working fine…

  • Posted 30 October 2017, 11:50 pm EST

    hello Reeva,

    I need to format an data inside presenter.Help me to do,my code is below

    
    presenter: '<div>{{~it.Fields:value:index}}<span > {{? it.Fields[' + i + '].FieldDataType==5}}formatData({{=it.Fields[' + i + '].Value }}){{??}}{{=it.Fields[' + i + '].Value }}{{?}} </span>{{~}}</div>'
    
    

    Here formatData is function().

    Thanks,

    Arulventhan NP

  • Posted 31 October 2017, 6:13 pm EST

    Hello,

    You can use this below mentioned format. Please check the following demo for more details :-https://www.grapecity.com/en/demos/spread/JS/viewsdemo/#/demos/CustomFormatter

    Following is a simple demonstration based on the case you provided:-

    var data = [{
           city: null,
           createdDate: "0001-01-01T00:00:00",
           createdUser: null,
           Fields: [{ "Id": 0, "Name": "Field01", "Value": "01" },
               { "Id": 1, "Name": "field02", "Value": "02" },
               { "Id": 2, "Name": "Field03", "Value": "03" },
               { "Id": 3, "Name": "Field04", "Value": "04" }
           ]
       },
       {
           city: null,
           createdDate: "0001-01-01T00:00:00",
           createdUser: null,
           Fields: [{ "Id": 0, "Name": "Field11", "Value": "11" },
               { "Id": 1, "Name": "field12", "Value": "12" },
               { "Id": 2, "Name": "Field13", "Value": "13" },
               { "Id": 3, "Name": "Field14", "Value": "14" }
           ]
       }
    ];
    var FieldHeader = [{ FieldName: 'Custom1' }, { FieldName: 'Custom2' }, { FieldName: 'Custom3' }, { FieldName: 'Custom4' }]
    //use a hidden column to refere the array data.
    var columns = [{ id: 'fields', dataField: 'Fields', visible: false }];
    var formatDataFn = function(args) {
       var rowFields = args.data.Fields;
       var colValue;
       var colId = args.colId;
       if (colId === 'Custom10') {
           //do any format here for column 0
           colValue = rowFields[0].Value;
           return 'Column 0 ' + colValue
       } else if(colId === 'Custom21') {
             return rowFields[1].Value
       }
       else {
           return 'hello';
       }
    
    }
    for (var i = 0; i < FieldHeader.length; i++) {
       var Cus = FieldHeader[i];
       var id = Cus.FieldName + i;
       var localIndex = i; //fix Closure issue
       n = {
           id: id,
           caption: Cus.FieldName,
           dataField: '',
           width: 200,
           format: formatDataFn,
           presenter: '{{=it.' + id + '}}' //change the presenter to use it.[COL_ID] to bind the data.
       }
       columns.push(n);
    }
    
    var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout());
    

    Hope it helps.

    Thanks,

    Reeva

  • Posted 3 November 2017, 4:04 pm EST

    Hai Reeva,

    In formatDataFn args i am getting total row values like data[0]. But we need to format the data value inside data[0].Fields[0].

    And my data array as follows

    var data = [{
           city: null,
           createdDate: "0001-01-01T00:00:00",
           createdUser: null,
           Fields: [{ "Id": 0, "Name": "Field01", "Value": "01","FieldDataType":"1" },
               { "Id": 1, "Name": "field02", "Value": "02" ,"FieldDataType":"2"},
               { "Id": 2, "Name": "Field03", "Value": "03" ,"FieldDataType":"1"},
               { "Id": 3, "Name": "Field04", "Value": "04" ,"FieldDataType":"3"}
           ]
       },
       {
           city: null,
           createdDate: "0001-01-01T00:00:00",
           createdUser: null,
           Fields: [{ "Id": 0, "Name": "Field11", "Value": "11","FieldDataType":"3" },
               { "Id": 1, "Name": "field12", "Value": "12","FieldDataType":"4" },
               { "Id": 2, "Name": "Field13", "Value": "13,"FieldDataType":"5" },
               { "Id": 3, "Name": "Field14", "Value": "14","FieldDataType":"3" }
           ]
       }
    ];
    

    And i used presenter as like below

    presenter: '<div>{{~it.Fields:value:index}}<span > {{? it.Fields[' + i + '].FieldDataType==5}}formatData({{=it.Fields[' + i + '].Value }}){{??}}{{=it.Fields[' + i + '].Value }}{{?}} </span>{{~}}</div>'
    

    Help me to solve this issue.

    Thanks,

    Arulventhan NP

  • Posted 9 November 2017, 8:38 pm EST

    Hello,

    Apologies for the delayed response first of all. We have reopened your issue with the concerned team for further investigation.

    We will get back to you as soon as we hear anything from them on the same.

    Thanks,

    Reeva

  • Posted 12 November 2017, 6:35 pm EST

    Hello,

    First, we don’t support doT.js array syntax directly, that is to say, that you can’t write presenter like {{~it.array:value:index}} and you need use presenter and column value format callback together to do that.

    In order to binding to array in one record, need define a column to mapping to one field in that array and then in the column value format call back you can use the column id to get the mapping index since it’s defined by yourself.

    The format callback function takes a params object with the following values:-

    colId: The id of the column to be formatted

    value: The underline value of that column

    data: The data item of that row

    In your case, value will be null because there is not a directly mapping (the value is a array),but using the colId you can know the field index since it’s defined by yourself in the previous column configuration. Like what we did in the previous reply (check the colId to figure out the column index). Then get the value for that column, like data[field_index], and then check the datatype and format specific value.

    The following is a running example, Hope it helps.

    
        var data = [{
            city: null,
            createdDate: "0001-01-01T00:00:00",
            createdUser: null,
            Fields: [{
                    "Id": 0,
                    "Name": "Field01",
                    "Value": "01",
                    "FieldDataType": "1"
                },
                {
                    "Id": 1,
                    "Name": "field02",
                    "Value": "02",
                    "FieldDataType": "2"
                },
                {
                    "Id": 2,
                    "Name": "Field03",
                    "Value": "03",
                    "FieldDataType": "1"
                },
                {
                    "Id": 3,
                    "Name": "Field04",
                    "Value": "04",
                    "FieldDataType": "3"
                }
            ]
        },
        {
            city: null,
            createdDate: "0001-01-01T00:00:00",
            createdUser: null,
            Fields: [{
                    "Id": 0,
                    "Name": "Field11",
                    "Value": "11",
                    "FieldDataType": "3"
                },
                {
                    "Id": 1,
                    "Name": "field12",
                    "Value": "12",
                    "FieldDataType": "4"
                },
                {
                    "Id": 2,
                    "Name": "Field13",
                    "Value": "13",
                    "FieldDataType": "5"
                },
                {
                    "Id": 3,
                    "Name": "Field14",
                    "Value": "14",
                    "FieldDataType": "3"
                }
            ]
        }
    ];
    
    var YOUR_FORMAT_FUN = function (data) {
        return 'YOUR_FORMAT(' + data + ')';
    }
    
    var getFieldIndex = function(colId) {
        if (colId === 'Custom10') {
            return 0
        } else if (colId === 'Custom21') {
            return 1
        } else if (colId === 'Custom32') {
            return 2
        } else if (colId === 'Custom43') {
            return 3
        }
    }
    var formatDataFn = function (args) {
    
        var rowFields = args.data.Fields;
        var colValue;
        var colId = args.colId;
        var colData = rowFields[getFieldIndex(colId)];
        return colData.FieldDataType === '5' ? YOUR_FORMAT_FUN(colData.Value) : colData.Value;
    }
    
    var FieldHeader = [{
        FieldName: 'Custom1'
    }, {
        FieldName: 'Custom2'
    }, {
        FieldName: 'Custom3'
    }, {
        FieldName: 'Custom4'
    }]
    //use a hidden column to refere the array data.
    var columns = [{
        id: 'fields',
        dataField: 'Fields',
        visible: false
    }];
    
    for (var i = 0; i < FieldHeader.length; i++) {
        var Cus = FieldHeader[i];
        var id = Cus.FieldName + i;
        var localIndex = i; //fix Closure issue
        n = {
            id: id,
            caption: Cus.FieldName,
            dataField: '',
            width: 200,
            format: formatDataFn,
            presenter: '<div><span>{{=it.' + id + '}}</div></span>' //change the presenter to use it.[COL_ID] to bind the data.
        }
        columns.push(n);
    }
    var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout());
    

    Thanks,

    Reeva

  • Posted 19 September 2018, 4:29 pm EST

    Hi Reeva,

    In above formatDataFn i need to check that if colData.FieldDataType === ‘6’ then need to update the presenter as ‘“+colData.Value+” ’.

    I tried , Its not updating me correctly.

    Help me to fix this issue

    Thanks,

    Arulventhan NP

  • Posted 20 September 2018, 7:41 pm EST

    Hello,

    We can do like the following, check filedDataType in formatDataFn, if it’s 6, add a prefix ‘href_’ on the colData.Value, then, update the column presenters to conditional template.

    See the following code for details:-

    
        var data = [{
            city: null,
            createdDate: "0001-01-01T00:00:00",
            createdUser: null,
            Fields: [{
                    "Id": 0,
                    "Name": "Field01",
                    "Value": "01",
                    "FieldDataType": "1"
                },
                {
                    "Id": 1,
                    "Name": "field02",
                    "Value": "02",
                    "FieldDataType": "2"
                },
                {
                    "Id": 2,
                    "Name": "Field03",
                    "Value": "03",
                    "FieldDataType": "1"
                },
                {
                    "Id": 3,
                    "Name": "Field04",
                    "Value": "04",
                    "FieldDataType": "3"
                }
            ]
        },
        {
            city: null,
            createdDate: "0001-01-01T00:00:00",
            createdUser: null,
            Fields: [{
                    "Id": 0,
                    "Name": "Field11",
                    "Value": "11",
                    "FieldDataType": "3"
                },
                {
                    "Id": 1,
                    "Name": "field12",
                    "Value": "12",
                    "FieldDataType": "4"
                },
                {
                    "Id": 2,
                    "Name": "Field13",
                    "Value": "13",
                    "FieldDataType": "5"
                },
                {
                    "Id": 3,
                    "Name": "Field14",
                    "Value": "14",
                    "FieldDataType": "3"
                }
            ]
        },
        {
            city: null,
            createdDate: "0001-01-01T00:00:00",
            createdUser: null,
            Fields: [{
                    "Id": 0,
                    "Name": "Field11",
                    "Value": "11",
                    "FieldDataType": "3"
                },
                {
                    "Id": 1,
                    "Name": "field12",
                    "Value": "12",
                    "FieldDataType": "4"
                },
                {
                    "Id": 2,
                    "Name": "Field13",
                    "Value": "13",
                    "FieldDataType": "5"
                },
                {
                    "Id": 3,
                    "Name": "Field14",
                    "Value": "http://www.grapecity.com",
                    "FieldDataType": "6"
                }
            ]
        }
    ];
    
    var YOUR_FORMAT_FUN = function (data) {
        return 'YOUR_FORMAT(' + data + ')';
    }
    
    var getFieldIndex = function(colId) {
        if (colId === 'Custom10') {
            return 0
        } else if (colId === 'Custom21') {
            return 1
        } else if (colId === 'Custom32') {
            return 2
        } else if (colId === 'Custom43') {
            return 3
        }
    }
    var formatDataFn = function (args) {
    
        var rowFields = args.data.Fields;
        var colValue;
        var colId = args.colId;
        var colData = rowFields[getFieldIndex(colId)];
        return colData.FieldDataType === '5' ? YOUR_FORMAT_FUN(colData.Value) : 
        (colData.FieldDataType === '6'? ('href_'+ colData.Value):colData.Value);
    }
    
    var FieldHeader = [{
        FieldName: 'Custom1'
    }, {
        FieldName: 'Custom2'
    }, {
        FieldName: 'Custom3'
    }, {
        FieldName: 'Custom4'
    }]
    //use a hidden column to refere the array data.
    var columns = [{
        id: 'fields',
        dataField: 'Fields',
        visible: false
    }];
    
    for (var i = 0; i < FieldHeader.length; i++) {
        var Cus = FieldHeader[i];
        var id = Cus.FieldName + i;
        var localIndex = i; //fix Closure issue
        n = {
            id: id,
            caption: Cus.FieldName,
            dataField: '',
            width: 200,
            format: formatDataFn,
            presenter: '{{? it.' + id + '.startsWith("href")}}<a href="{{=it.' + id + '.slice(5)}}" target="_blank">{{=it.' + id + '.slice(5)}}</a>{{??}}<div><span>{{=it.' + id + '}}</div></span>{{?}}' //change the presenter to use it.[COL_ID] to bind the data. 5 is the length of 'href_'
        }
        columns.push(n);
    }
    
    var dataView = new GC.Spread.Views.DataView(document.getElementById('grid1'), data, columns, new GC.Spread.Views.Plugins.GridLayout());
    

    Hope it helps.

    Thanks,

    Reeva

  • Posted 20 September 2018, 9:53 pm EST

    Hi Reeva,

    	I followed the above method, but while using startsWith method the grid was not binding it shows empty.
    

    My presenter as follows

    
    presenter: '{{? it.' + id+ '.startsWith("href")}}<a style="padding: 4px;min-height:26px;max-height:30px;width: 100%;left: 0;margin: 0 !important;float: right;font-size:14px;background-color:{{=it.Color}}" href="{{=it.' + id + '.slice(5)}}" target="_blank">{{=it.' + id+ '.slice(5)}}</a>{{??}} <span style="padding: 4px;min-height:26px;max-height:30px;width: 100%;left: 0;margin: 0 !important;float: right;font-size:' + fontSize + 'px;background-color:{{=it.Color}}" >{{=it.' + id+ '}}</span>{{?}}',
    
    
    
    if ( s.customFieldDataType == 6 ) { 
                            s.customValue = s.customValue?'href_' + s.customValue:""; 
                   }
    
    

    Thanks,

    Arulventhan NP

  • Posted 26 September 2018, 5:47 pm EST

    Hello,

    Since FontSize isn’t defined in your presenter i.e. why you are getting blank Spread.

    We have modified presenter in attached sample and it works fine and Spread.View gets rendered properly.

    Please have a look at attached sample and screenshot for more clarity.

    Thanks,

    Reeva

    SpreadView_modified.zip

  • Posted 27 September 2018, 6:07 pm EST

    hi Reeva,

    Very Thankful, It was working fine.

    Regards,

    Arulventhan NP

  • Posted 27 September 2018, 7:34 pm EST

    Hello,

    We are glad to know that your issue has been resolved.

    Thanks,

    Reeva

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels