Fill table column with Object Json (using Footable)

Question

I’m testing a plugin to load a Json into a table, footable, I managed to make it load simple Json. But when I test a Json where one of the columns is a Json object I cannot see the fields of that object.

Json below:

[
      {
      "pessoa":       {
         "id": 1,
         "tipo": "J",
         "razao_social": "INTELIDER",
         "nome_fantasia": "INTELIDER LTDA",
         "cpf_cnpj": "10999558000186",
         "rg_insc_estadual": "132456789"
      },
      "id": 1,
      "login": "gleyson",
      "senha": "123456",
      "ativo": "S"
   },
      {
      "pessoa":       {
         "id": 11,
         "tipo": "F",
         "razao_social": "i9maker ltda",
         "nome_fantasia": "INTELIDER LTDA",
         "cpf_cnpj": "",
         "rg_insc_estadual": "123456"
      },
      "id": 11,
      "login": "gleyson",
      "senha": "123456",
      "ativo": "S"
   }
]

the loading code is this:

 $('.table').footable({
                    "columns": [
                        { "name": "login", "title": "Login"},
                        { "name": "razao_social", "title": "Razão Social", "breakpoints": "xs" },
                        { "name": "nome_fantasia", "title": "Nome fantasia", "breakpoints": "xs" },
                        { "name": "cpf_cnpj", "title": "CNPJ", "breakpoints": "xs sm" },
                        { "name": "rg_insc_estadual", "title": "Inscrição", "breakpoints": "xs sm md" }
                    ],
                    "rows": result
                });

I pass Json to the function through the result variable.

The table is loaded but the fields that refer to the class person do not appear:

Answer 1

[{
 "pessoa": {
   "id": 1,
   "tipo": "J",
   "razao_social": "INTELIDER",
   "nome_fantasia": "INTELIDER LTDA",
   "cpf_cnpj": "10999558000186",
   "rg_insc_estadual": "132456789"
  },
  "id": 1,
  "login": "gleyson",
  "senha": "123456",
  "ativo": "S"
}]

it can popular login because it is at the root; the other fields are inside an array, ie you need to reference the complete "path".

$('.table').footable({
  "columns": [
    { "name": "pessoa_login", "title": "Login"},
    { "name": "pessoa_razao_social", "title": "Razão Social", "breakpoints": "xs" },
    { "name": "pessoa_nome_fantasia", "title": "Nome fantasia", "breakpoints": "xs" },
    { "name": "pessoa_cpf_cnpj", "title": "CNPJ", "breakpoints": "xs sm" },
    { "name": "pessoa_rg_insc_estadual", "title": "Inscrição", "breakpoints": "xs sm md" }
  ],
  "rows": result
});