Map Data from Object for Datatable on React

Topic: Map Data from Object for Datatable on React

Chris Christensen free asked 5 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.

Add comment

Konrad Stępień staff answered 5 years ago

1 0 Best answer

Hi <a href="/profile/?id=74589" target="_blank" rel="nofollow">@Chris Christensen</a>,

I transformed your code and data for a working example.

Try something like this.

<pre class="prettyprint"><code>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;
</code></pre>

but I think this way is better:

<pre class="prettyprint"><code>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;
</code></pre>

Try this and tell me if the problem still exists.

Best regards, Konrad.

Please insert min. 20 characters.

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 5 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 5 years ago

I do waiting for it :)

Best, Konrad.

Add comment

Write

Create snippet

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

Chris Christensen

5Support score
1Questions 0Answers 0Snippets