How to use the nested JSON object through setting?

[sskmail14]

Hi I have a nested JSON

[country:{
    "name":"India",
     "states":{
                   [{
                     .................
                    }]
                  }

}
...
]

I have tried but doesn't work :(

settings:{
        columns:{
              country:{
                    title:"Countries"
              },
              country.states:{
                     title:"States"
              }
        }
}

[noboddee]

Hi @sskmail14 have you find any solution for this ??

[sskmail14]

@noboddee Its a work around and bad practice, but still I will let you know, i have copied the properties to the master JSON from nested JSON.

But that's not the proper solution.

[thilina01]

having the same requirement. Need to display some attribute values of nested objects.

[BoyardIsBack]

Hi, same requirement for me too. It would be great and more flexible.

[sskmail14]

@thilina01 @BoyardIsBack Temporary Solution : Have the all the properties in the main JSON that you want to use.

But this not the proper solution.

[BoyardIsBack]

@sskmail14 Thanks, I just rebuild a proper array from my nested JSON.

[tanzeelrana]

Is there a better solution than flattening our nested JSON Objects ?

[tanzeelrana]

`Need to flatten the objects,

Params :

objects : at least n>0 array off JSON objects (dose not matter is circular) target : {} path : ""

Note : make sure the Objects Array passed in is n>0 at least

flatten(objects, target, path) {
let me = this;    
let retArray = [];
for(let x=0; x < objects.length; x++) {
  
  let object = objects[x];
  path = path || '';
  target={};
  
  target = me.flattenHelper(object, target, path);
  
  retArray.push(target);
}
return retArray;}

..

flattenHelper(object, target, path){
let me = this;
Object.keys(object).forEach(function (key) {
  console.log("key : "+ key + " : object : " +  (object[key] && typeof object[key] === 'object') + " path : " + path);
  if (object[key] && typeof object[key] === 'object') {
      me.flattenHelper(object[key], target, path + key);
  }
  target[path + key] = object[key];
  console.log(target);
});
return target;}`

[OrenciucEvghenii]

Hi guys, I found a sollution: Use valuePrepareFunction for each element you need to prepare the value:

settings:{
        columns:{
              country:{
                    title:"Countries"
              },
              country:{
                     title:"States",
                     valuePrepareFunction: (country) => {
                         return country.state;
                     }
              }
        }
}

more on https://akveo.github.io/ng2-smart-table/#/documentation

[sskmail14]

@OrenciucEvghenii Thanks... This looks good... So closing this issue.

[OrenciucEvghenii]

@sskmail14, Hi again, no, it's not enough. so you can't duplicate fields in JS. Compiler says, that it's impossible to have duplicate field names in strict mode. So, the solution is possible, but not completely. Issue is still open, i think

[sskmail14]

@OrenciucEvghenii Does the above example has the flaw or in some other example? If so can you kindly illustrate?

[valter-jnr]

Hi guys! I'm facing the same @OrenciucEvghenii mentionated.

I have a json like this :

{ "group" : "tatuape", "publisher" : { "pubName" : "Valter Junior" }, "houseHolder" : { "hhName" : "Osas", "hhGender" : "male", "hhNationality" : "nigerien", "hhPhone" : "11979620954", "address" : { "hhZipCode" : "08275340", "hhAddress" : "Rua xavier Palmerim", "landmark" : "asf" } }, "status" : { "status" : "visit", "pubName" : "Aline Nascimento" }, "hhNotes" : "Teste", "_id" : ObjectId("590af6bfb8fb493797b5b269") }

I need to present it into smart-table, but when I try to get the value of houseHolder.hhName and houseHolder.hhGender it is not allowed, because as I understood, to valuePrepareFunction works the key of columns always need to be the wrapper, in this case houseHolder

[hgarc014]

@juniorsml did you find a way around this?

[pulfabio]

Same as @OrenciucEvghenii.

Code:

And the error pop-up:

[Gradiusso89]

I'm in the same situation of pulfabio. Any solution?

[sskmail14]

Issue exists so opening this issue.

[Gradiusso89]

I solved this problem using type "custom" and then render an external component

[sskmail14]

@Gradiusso89 Can you kindly provide some sample snippet. So that it might help for the others to understand.

[hamdullah]

I have fixed the issue by using (cell, row) here is code snippet: initiator: { title: "Started By", type:'string', valuePrepareFunction: (cell,row) => { return row.startedBy.lastName; } }, email: { title: "Email", type:'string', valuePrepareFunction: (cell,row) => { return row.startedBy.email; } }, Hope it works for you too. :)

[crossRT]

Thanks @hamdullah ! Your solution works very well! and here's my version.

  settings = {
    mode: 'external',
    columns: {
      driverName: {
        title: 'Driver Name',
        valuePrepareFunction: (driver, trip) => {
          return `${trip.driver.firstName} ${trip.driver.lastName}`;
        }
      },
      driverContact: {
        title: 'Driver Contact',
        valuePrepareFunction: (driver, trip) => {
          return trip.driver.phoneNumber;
        }
      },
      status: {
        title: 'Status'
      },
      ratingByPassenger: {
        title: 'Rating'
      }
    }
  }

[FJB-ZA]

The above solution does not seem to work with sorting

[mattmelgard]

I just referenced the nested properties by accessing it through the row argument that gets passed into the valuePrepareFunction. That seems to work pretty well for now.

[dgpuranik]

@hamdullah @mattmelgard and @crossRT If you use this logic, you will be able to display the table correctly but sorting and searching functionality of table wont work.

[mathuranubhav]

@dgpuranik I agree, I'm having the same problem.

[sophiecmusical]

Also here, you can display it right, but you can search, filter or edit. This is not working for me.

[djibythiaw]

Hello, Is there actually a solution for the filter and edit problem by using the logic of the cell and row ? Thanks

[melaniecarr23]

You can also use filterFunction() to use filtering with nested JSON.

filterFunction(fieldname?: any, search?: string): boolean { if (fieldname.nestedvalue === search) { return true; } else { return false; } }

[jmgomez1986]

Same as @OrenciucEvghenii.

Code:

And the error pop-up:

I have same probleme? any solution? please, is urgent

[MallonEmanuel]

Thanks @hamdullah ! here another example

getSettingSmartTable(){
    return {
      columns: {
        id: {
          title: '#Venta'
          // ,width: '15%'
          ,filter:false
        }
        ,precio: {
          title: 'Precio'
          ,type: 'number'
          ,filter:false
        }
        ,codigo:{
           title:"Codigo"
          ,filter:false
          ,valuePrepareFunction: (cell,row) => {
               return row.articulo.codigo;
           }
        }
        ,articulo:{
           title:"Articulo"
          ,filter:false
          ,valuePrepareFunction: (cell,row) => {
               return row.articulo.descripcion;
           }
        }
        ,cantidad: {
          title: 'Cantidad'
          ,type: 'number'
          ,filter:false
        }
        ,total: {
          title: 'Total'
          ,type: 'number'
          ,filter : false
        }
      }
      ,noDataMessage : 'Todabia no se registraron ventas el dia de hoy'
    };
  }// end getSettingSmartTable

and a json example.

{
  "data": [
    {
      "id": 1,
      "precio": "25.00",
      "costo": "15.00",
      "total": "25.00",
      "cantidad": 1,
      "articulo_id": 1,
      "created_at": null,
      "updated_at": null,
      "articulo": {
        "id": 1,
        "codigo": "7791669001103",
        "descripcion": "Bicarbonato Indias x25g",
        "stock": 0,
        "stock_minimo": null,
        "unidad_medida": "UNIDAD",
        "precio": "25.00",
        "costo": "15.00",
        "fecha_desde": "2020-01-04",
        "created_at": null,
        "updated_at": null
      }
    }
  ]
}

[nicole-ge]

Thanks @MallonEmanuel

I have tried you example.

But Your example don't work with data format like this.

[ {"name": "Product 1", "series":[{"name":"Area 1","value":3},{"name":"Area 2","value":1}] }, {"name":"Product 2", "series":[{"name":"Area 2","value":3}] } ];

What can I do to make it work?

I have tried it with with series[0].name. This work but shows me only one entry and not all.

Kind regards

[MallonEmanuel]

Hi @nicole-ge !! the getSettingSmartTable function is used to return the table configuration

with this data:

[{"name": "Product 1",
"series": [{"name": "Area 1", "value": 3}, {"name": "Area 2", "value": 1}]},
{"name": "Product 2",
"series": [{"name": "Area 2", "value": 3}]}
];

If you want to see something like this, you could get the max size of serial arrays and programmatically build the table configuration.

| Product | series [0] | series [1] |
| Product1 | Area 1    |    Area2   |
| Product2 | Area 2    |                 |

But generally when you want to see the contents of two arrays, where one depends on the another you could use master-detail. Or maybe I'm not understanding what you want to do. You could also tell me how you want to see the data, that would help a lot.

Finally if you want a table similar to the following, where series is a selec list.

| Product | Series |
| Product1 | Area 1  |
| Product2 | Area 2  |

getSettingSmartTable () {
    return {
      columns: {
         name: {
           title: 'Product'
         },
        ,Serie: {
          title: 'series'
          ,editor:{
              type: 'list'
              , config: {
                  selectText: 'Select'
                  , list: [
                      {value: 1, title: 'Area 1'}
                      , {value: 2, title: 'Area 2'}
                  ]
              }
          }
        }
   }; // end return
} // end getSettingSmartTable

[muneebattamindravel]

Hi guys, I found a sollution: Use valuePrepareFunction for each element you need to prepare the value:

settings:{
        columns:{
              country:{
                    title:"Countries"
              },
              country:{
                     title:"States",
                     valuePrepareFunction: (country) => {
                         return country.state;
                     }
              }
        }
}

more on https://akveo.github.io/ng2-smart-table/#/documentation

Doing this works fine. But the filter doesn't work on the values. Any solution to cater the filter as well?

[muneebattamindravel]

I have fixed the issue by using (cell, row) here is code snippet: initiator: { title: "Started By", type:'string', valuePrepareFunction: (cell,row) => { return row.startedBy.lastName; } }, email: { title: "Email", type:'string', valuePrepareFunction: (cell,row) => { return row.startedBy.email; } }, Hope it works for you too. :)

Thanks @hamdullah Doing this displays the value fine, but sorting and filtering doesn't work. Any solution for this?

[muneebattamindravel]

Thanks @hamdullah ! Your solution works very well! and here's my version.

  settings = {
    mode: 'external',
    columns: {
      driverName: {
        title: 'Driver Name',
        valuePrepareFunction: (driver, trip) => {
          return `${trip.driver.firstName} ${trip.driver.lastName}`;
        }
      },
      driverContact: {
        title: 'Driver Contact',
        valuePrepareFunction: (driver, trip) => {
          return trip.driver.phoneNumber;
        }
      },
      status: {
        title: 'Status'
      },
      ratingByPassenger: {
        title: 'Rating'
      }
    }
  }

Hi @crossRT Doing this displays the value fine, but sorting and filtering doesn't work. Any solution for this?

[almawhoob]

You may consider flattening your JSON object. See topic: Fastest way to flatten / un-flatten nested JSON objects You can also take a look at lodash flatten, flattenDeep, and flattenDepth functions.

[Fayiz-A]

@hamdullah solution works. However in order for the filtering to work you need to do something like this:

` filterFunction(rowValueObject?: any, search?: string): boolean {

      if (rowValueObject.propertyName.toUpperCase().includes(search.toUpperCase())) {
           return true;
      } else {
           return false;
      }
    }

`

NOTE: Replace the propertyName with the property in your nested json. Then only it will work

[thapliyalmanoj]

Something Like This:

settings = {
columns: {
name: {
title: 'Driver Name',
valuePrepareFunction: (cell, row) => { return row.driver.name; },
filter: false
},
mobilenumber: {
title: 'Mobile Number',
valuePrepareFunction: (cell, row) => { return row.driver.mobilenumber; },
filter: false
},
},
}