Author Topic: How to deal with nested json data in bulk edit?  (Read 146 times)

iamdileep

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 6
    • View Profile
How to deal with nested json data in bulk edit?
« on: June 13, 2022, 02:36:18 pm »
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": "abcd@example.com",
    "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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5564
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #1 on: June 13, 2022, 10:05:14 pm »
[ Only Pro members may read this post. ]

iamdileep

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #2 on: June 14, 2022, 11:08:08 am »
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": "abcd@example.com",
    "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": "xyz@example.com",
    "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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5564
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #3 on: June 14, 2022, 07:01:05 pm »
[ Only Pro members may read this post. ]

iamdileep

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #4 on: June 18, 2022, 12:40:01 pm »
I have tried your example, its working fine.
But how to do this in case of remote dataModel?

iamdileep

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #5 on: June 18, 2022, 12:53:22 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5564
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #6 on: June 20, 2022, 04:56:15 pm »
[ Only Pro members may read this post. ]

iamdileep

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #7 on: June 22, 2022, 05:15:29 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5564
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #8 on: June 23, 2022, 07:25:16 pm »
[ Only Pro members may read this post. ]
« Last Edit: June 23, 2022, 10:36:50 pm by paramvir »

iamdileep

  • Pro Enterprise
  • Newbie
  • *
  • Posts: 6
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #9 on: June 28, 2022, 03:20:47 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 5564
    • View Profile
Re: How to deal with nested json data in bulk edit?
« Reply #10 on: June 30, 2022, 12:42:09 pm »
[ Only Pro members may read this post. ]