Topic: Map Data from Object for Datatable on React

Chris Christensen free asked 4 years ago


Expected behavior I have an array that contains multiple objects with user information. I map over this data and use the result for data for the table. I am currently using react-bootstrap-table to accomplish this and it works fine. However, I like the look of the mdb react datatable and would prefer to use it.

Actual behavior When mapping over the data with mdb react no data is displayed including the headers for the table.

Resources (screenshots, code snippets etc.) The users array looks like this:

[
  {
    username: "14a272ba-5bf8-4707-806f-847648550f4f", 
    Attributes: [
      {
        Name: "given_name", 
        Value: "John"
      }, 
      {
        Name: "family_name", 
        Value: "Doe"
      }, 
      {
        Name: "address", 
        Value: "111 Main St"
      }, 
      {
        Name: "city", 
        Value: "New York"
      }, 
      {
        Name: "state", 
        Value: "New York"
      }
    ], 
    UserCreateDate: Wed Jun 19 2019 10:51:38 GMT-0400 (Eastern Daylight Time)
  },
  {
    username: "14a272ba-5bf8-4707-806f-847648550f4f", 
    Attributes: [
      {
        Name: "given_name", 
        Value: "Jane"
      }, 
      {
        Name: "family_name", 
        Value: "Doe"
      }, 
      {
        Name: "address", 
        Value: "112 Main St"
      }, 
      {
        Name: "city", 
        Value: "Los Angeles"
      }, 
      {
        Name: "state", 
        Value: "California"
      }
    ], 
    UserCreateDate: Wed Jun 19 2019 11:51:38 GMT-0400 (Eastern Daylight Time)
  },
  {
    username: "14a272ba-5bf8-4707-806f-847648550f4f", 
    Attributes: [
      {
        Name: "given_name", 
        Value: "Bob"
      }, 
      {
        Name: "family_name", 
        Value: "Smith"
      }, 
      {
        Name: "address", 
        Value: "113 Main St"
      }, 
      {
        Name: "city", 
        Value: "Chicago"
      }, 
      {
        Name: "state", 
        Value: "Illinois"
      }
    ], 
    UserCreateDate: Wed Jun 19 2019 12:51:38 GMT-0400 (Eastern Daylight Time)
  }
]

This is what I am doing that is not working.

const data = users.map(user => ({
columns: [
  {
    label: 'First Name',
    field: 'given_name',
    sort: 'asc',
    width: 90
  },
  {
    label: 'Last Name',
    field: 'family_name',
    sort: 'asc',
    width: 90
  },
  {
    label: 'Address',
    field: 'address',
    sort: 'asc',
    width: 45
  },
  {
    label: 'City',
    field: 'city',
    sort: 'asc',
    width: 45
  },
  {
    label: 'State',
    field: 'state',
    sort: 'asc',
    width: 45
  }
],
rows: [
  {
    given_name: user.Attributes[0].Value,
    family_name: user.Attributes[1].Value,
    city: user.Attributes[2].Value,
    state: user.Attributes[3].Value,
  }
]

}));

No doubt I'm missing something. Any help would be appreciated.


Konrad Stępień staff answered 4 years ago


Hi @Chris Christensen,

I transformed your code and data for a working example.

Try something like this.

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

const DatatablePage = () => {
  const user = [
    {
      username: "14a272ba-5bf8-4707-806f-847648550f4f", 
      Attributes: [
        {
          Name: "given_name", 
          Value: "John"
        }, 
        {
          Name: "family_name", 
          Value: "Doe"
        }, 
        {
          Name: "address", 
          Value: "111 Main St"
        }, 
        {
          Name: "city", 
          Value: "New York"
        }, 
        {
          Name: "state", 
          Value: "New York"
        }
      ], 
      UserCreateDate: `Wed Jun 19 2019 10:51:38 GMT-0400 (Eastern Daylight Time)`
    },
    {
      username: "14a272ba-5bf8-4707-806f-847648550f4f", 
      Attributes: [
        {
          Name: "given_name", 
          Value: "Jane"
        }, 
        {
          Name: "family_name", 
          Value: "Doe"
        }, 
        {
          Name: "address", 
          Value: "112 Main St"
        }, 
        {
          Name: "city", 
          Value: "Los Angeles"
        }, 
        {
          Name: "state", 
          Value: "California"
        }
      ], 
      UserCreateDate: `Wed Jun 19 2019 11:51:38 GMT-0400 (Eastern Daylight Time)`
    },
    {
      username: "14a272ba-5bf8-4707-806f-847648550f4f", 
      Attributes: [
        {
          Name: "given_name", 
          Value: "Bob"
        }, 
        {
          Name: "family_name", 
          Value: "Smith"
        }, 
        {
          Name: "address", 
          Value: "113 Main St"
        }, 
        {
          Name: "city", 
          Value: "Chicago"
        }, 
        {
          Name: "state", 
          Value: "Illinois"
        }
      ], 
      UserCreateDate: `Wed Jun 19 2019 12:51:38 GMT-0400 (Eastern Daylight Time)`
    }
  ];

  const userAttributes = []
  user.forEach(el=>{
    userAttributes.push({
      given_name: el.Attributes[0].Value,
      family_name: el.Attributes[1].Value,
      address: el.Attributes[2].Value,
      city: el.Attributes[3].Value,
      state: el.Attributes[4].Value
    })
  });

  const data = {
    columns: [
      {
        label: 'First Name',
        field: 'given_name',
        sort: 'asc',
        width: 90
      },
      {
        label: 'Last Name',
        field: 'family_name',
        sort: 'asc',
        width: 90
      },
      {
        label: 'Address',
        field: 'address',
        sort: 'asc',
        width: 45
      },
      {
        label: 'City',
        field: 'city',
        sort: 'asc',
        width: 45
      },
      {
        label: 'State',
        field: 'state',
        sort: 'asc',
        width: 45
      }
    ],
    rows: userAttributes
  };

  return (
    <MDBDataTable
      striped
      bordered
      hover
      data={data}
    />
  );
}

export default DatatablePage;

but I think this way is better:

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

const DatatablePage = () => {
  const data = {
    columns: [
      {
        label: 'First Name',
        field: 'given_name',
        sort: 'asc',
        width: 90
      },
      {
        label: 'Last Name',
        field: 'family_name',
        sort: 'asc',
        width: 90
      },
      {
        label: 'Address',
        field: 'address',
        sort: 'asc',
        width: 45
      },
      {
        label: 'City',
        field: 'city',
        sort: 'asc',
        width: 45
      },
      {
        label: 'State',
        field: 'state',
        sort: 'asc',
        width: 45
      }
    ],
    rows: [
      {
        address: '111 Main St',
        city: 'New York',
        family_name: 'Doe',
        given_name: 'John',
        state: 'New York'
      },
      {
        address: '112 Main St',
        city: 'Los Angeles',
        family_name: 'Doe',
        given_name: 'Jane',
        state: 'California'
      },
      {
        address: '113 Main St',
        city: 'Chicago',
        family_name: 'Smith',
        given_name: 'Bob',
        state: 'Illinois'
      }
    ]
  };

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

export default DatatablePage;

Try this and tell me if the problem still exists.

Best regards, Konrad.


Chris Christensen free commented 4 years ago

Hi Konrad,

Thanks so much for the response. I'll give this a try and report back

Chris


Konrad Stępień staff commented 4 years ago

I do waiting for it :)

Best, Konrad.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.19.0
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows and Linux
  • Provided sample code: No
  • Provided link: No