Datatables get data from nested JSON Object

Hi @rafitio,

Did you try to console.log a principal.name? What output do you have when you console.log this.

I've tested your REST response and make an object in my app like this:

 const object = {
    status: true,
    message: 'nostrud nulla d',
    error: {},
    data: [
      {
        id: -28880473,
        name: 'fugiat',
        principal: {
          id: 40849950,
          name: 'pariatur ea id ipsum'
        }
      }
    ]
  };

  const data = () => ({
    columns: [
      {
        label: `${object.data[0].principal.name}`,
        field: 'name',
        width: 150,
        attributes: {
          'aria-controls': 'DataTable',
          'aria-label': 'Name'
        }
      },
....... rest of datatable code

And it works for me. I paste below an image to proof that:

I think that the problem is with your "path" to the principal name, and you cand write an path to object in quotes, you need to use gravis there. Please check my working example and try to implement this in your code.

Best, Kuba

@Jakub Chmura I tried your method but it doesn't work with field, any ideas?

@Jakub Chmura thanks for the response

My code looks like this:

  const data = {
    columns: [
      {
        label: "Name",
        field: "fullName",
        sort: "asc",
        width: 150
      },
      {
        label: "Business Type",
        field: `businness.type`
      }
    ],
    rows: [
      {
        "name": "Josh Aquino",
        "business" : { 
            "businessName" : "Cooking Street",
            "type": "Culinary Supplies"
        }
    }
    ]
  };



return <MDBDataTable striped bordered small data={data} />;

What I'm trying to acomplish is access business.type but it won't work when I try using the business.type

@Jakub Chmura I think @rafitio and I has the same problem

Hi, @Josh Aquino,

I'm already tested your code and I see that you made many mistakes.

First of all, you should separate your datatable entries from a datatable structure object. The first mistake is that you are trying to access an object from inside of it. The second one. Is that you made a typo here :

  field: `businness.type` 

The next mistake applies to the same as above. You write just a string. And this field name was signed to this datatable.

If you want to sign here a value from another object you should write a path like this.

 field: `${datatables.business.type}`

I paste here an example of my code that works with your case.

import React from 'react';
import { MDBDataTable } from 'mdbreact';

const DataTable = () => {
  const datatables = {
    name: 'Josh Aquino',
    business: {
      businessName: 'Cooking Street',
      type: 'culinarySupplies'
    }
  };

  const data = {
    columns: [
      {
        label: 'Name',
        field: 'fullName',
        sort: 'asc',
        width: 150
      },
      {
        label: 'Business Type',
        field: `${datatables.business.type}`
      }
    ],
    rows: [
      {
        fullName: `${datatables.name}`,
        culinarySupplies: `${datatables.business.businessName}`
      }
    ]
  };

  return <MDBDataTable striped bordered small data={data} />;
};

export default DataTable;

Best, Kuba