How to deal with nested json data in bulk edit?

[iamdileep]

Hi,

In the following URL, you have explained the nested json datamodel.
https://paramquery.com/pro/demos/json_nested

But in my case, I have a json data with the dynamic key, value pair. So I cannot predefine the column as shown in your example.

Json example,
{
    "id": "1",
    "name": "abcd",
    "email": "[email protected]",
    "phone":"1234567890",
    "custom_fields": [
        {
            "type":"text",
            "required":true,
            "label":"address",
            "className":"form-control",
            "userData":"MG Road"
        },
        {
            "type":"text",
            "required":true,
            "label":"city",
            "className":"form-control",
            "userData":"Bangalore"
        },
        {
            "type":"text",
            "required":true,
            "label":"pincode",
            "className":"form-control",
            "userData":"560042"
        }
    ]
}

custom_fields column may have different kind of objects, so how to handle the dynamic json data?

[paramvir]

Solution depends upon which keys are dynamic and how you want to display them in the grid.

Can you provide at least one more sample of data with different set of key value pairs

and

a sample display of data in the grid.

[iamdileep]

I wanted to display the nested json as columns with other common fields.
In my previous example, "label" key has to be the column name and "userData" key will be the value in the grid.

Example 2:
{
    "id": "1",
    "name": "abcd",
    "email": "[email protected]",
    "phone":"1234567890",
    "custom_fields": [
        {
            "type":"text",
            "name":"father_name",
            "label":"Father Name",
            "userData":"XYZ"
        },
        {
            "type":"text",
            "name":"mother_name",
            "label":"Mother Name",
            "userData":"HIJK"
        },
        {
            "type":"text",
            "name":"graduation",
            "label":"Graduation",
            "userData":"BE"
        },
        {
            "type":"text",
            "name":"college_name",
            "label":"College Name",
            "userData":"Bangalore University"
        }
    ]
},
{
    "id": "2",
    "name": "xyz",
    "email": "[email protected]",
    "phone":"1234567890",
    "custom_fields": [
        {
            "type":"text",
            "name":"father_name",
            "label":"Father Name",
            "userData":"ABCD"
        },
        {
            "type":"text",
            "name":"mother_name",
            "label":"Mother Name",
            "userData":"PQRS"
        },
        {
            "type":"text",
            "name":"graduation",
            "label":"Graduation",
            "userData":"MSC"
        },
        {
            "type":"text",
            "name":"college_name",
            "label":"College Name",
            "userData":"Mysore University"
        }
    ]
}

Grid to be displayed:

[paramvir]

It can be dealt with by generating colModel and rowTemplate dynamically.

Code: [Select]

  var colM = [{
      dataIndx: 'id'
    },
    {
      dataIndx: 'name'
    },
    {
      dataIndx: 'email'
    },
    {
      dataIndx: 'phone'
    }
  ];
  var rowTemplate = {};
 
  data[0].custom_fields.forEach(function(item, indx) {
    colM.push({
      dataIndx: item.name,
      title: item.label
    });
    (function(_indx) {
      Object.defineProperty(rowTemplate, item.name, {
        enumerable: true,
        get() {
          return this.custom_fields[_indx].userData;
        },
        set(val) {
          this.custom_fields[_indx].userData = val;
        }
      })
    })(indx);
  })

https://jsfiddle.net/xao823ft/

[iamdileep]

I have tried your example, its working fine.
But how to do this in case of remote dataModel?

[iamdileep]

Here is my code for remote dataModel

var rowTemplate = {};

        var dataModel= {
          dataType: "JSON",
          location: "remote",
          paging: "remote",
          sorting: "remote",
          recIndx: "id",
          sortIndx: "id",
          sortDir: "down",
          colIndx:"id",
          url: "get_grid_data?id=1",
          getData: function (response) {
              if(response.status=='success'){
                var grid_data=response.datas;
                var jsonobj = jQuery.parseJSON(grid_data[0].input_json);
                jsonobj.forEach(function(item, indx) {
                    colModel.push({
                      dataIndx: item.name,
                      title: item.label
                    });
                    (function(_indx) {
                      Object.defineProperty(rowTemplate, item.name, {
                        enumerable: true,
                        // configurable:true,
                        get() {
                          return this.jsonobj[_indx].userData;
                        },
                        set(val) {
                          this.jsonobj[_indx].userData = val;
                        }
                      })
                    })(indx);
                  });
                return {curPage: response.page_number, totalRecords: response.total_rows, data: grid_data };
              }else{
                swal(response.message);
              }
          }
        };

[paramvir]

Please check this example:

https://paramquery.com/pro/demos/dynamic_columns

[iamdileep]

Thanks for the solution. I am able to render the data as I requested.
But I have some concerns,
1)When grid refresh is triggered, it's throwing an error for saying that "Cannot redefine property: father_name" which does not allowing to reassign the template row for nested json data.
2)On edit it's sending old data only not the updated one.
3)How to send the data as nested json (as like as input given) on edit & save?

[paramvir]

1. Add configurable: true to the Object.defineProperty as shown in the updated example. https://paramquery.com/pro/demos/dynamic_columns

2. Turn on the tracking. trackModel: { on: true }, //to turn on the track changes.  and add dataModel.recIndx similar to this example:

https://paramquery.com/pro/demos/editing_batch

3. updateList contains values in both plain and nested format when format: 'raw' is passed to getChanges method.

https://paramquery.com/pro/api#method-getChanges

[iamdileep]

Hi,

1)If configurable set to true, on grid refresh the nested json fields are repeating in column model.
2)Set(val) is not working properly, since userData is an indexed array (Example., userData:['abcd']) on edit we are getting old data only.

Following is the jsfiddle link contains the source code for remote data.
https://jsfiddle.net/sart_tech/60voedjq/89/

[paramvir]

1. issue is not clear.

2. Make changes in rowTemplate getter and setter according to the structure of data.

Code: [Select]

get() {
  ....
  return this.custom_fields[_indx].userData[0];
},
set(val) {
  this.custom_fields[_indx].userData = [val]; 
}

Ensure to turn on tracking and add primary key i.e., dataModel.recIndx similar to this example:

https://paramquery.com/pro/demos/editing_batch