How to render datagrid with antd table component from rest api

Question

I have the following code which renders a table with antd component. I created a fetchdata that is returning some information correctly

Code:

import React, { Component } from 'react';
import {  Table} from 'antd';
import { adalApiFetch } from '../../adalConfig';


class ListTenants extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: []
        };
    }

    fetchData = () => {
        adalApiFetch(fetch, "/Tenant", {})
          .then(response => response.json())
          .then(responseJson => {
            if (!this.isCancelled) {
              this.setState({ data: responseJson });
            }
          })
          .catch(error => {
            console.error(error);
          });
      };


    componentDidMount(){
        this.fetchData();
    }

    render() {
        const columns = [{
            title: 'Tenant Id',
            dataIndex: 'TenantId',
            key: 'TenantId'
          }, {
            title: 'Tenant Url',
            dataIndex: 'TenantUrl',
            key: 'TenantUrl',
        }];

        const data = [{
            TenantId: '1',
            TenantUrl: 'John Brown'           
          }, {
            TenantId: '2',
            TenantUrl: 'Jim Green'
          }, {
            TenantId: '3',
            TenantUrl: 'Joe Black'
        }];

        return (
            <Table columns={columns} dataSource={data} />
        );
    }
}

export default ListTenants;

How do I convert the json received to columns and data?

Answer 1

Assuming your question is how to render the object to match the keys in your Table data object, something like this should work:

repl here: https://repl.it/repls/FabulousWiryLicensing

This will give you the idea, but the cleaner solution is to map the responseJson object you're getting back from the API call and setState with that.

```

 class App extends Component {
  constructor (props) {
    super (props)
    this.state = {
      returnedData: [{
        ClientId: '1',
        Id: 'abc',
        TenantDomainUrl: 'https://example.com'
      }, {
        ClientId: '2',
        Id: 'abc',
        TenantDomainUrl: 'https:example2.com'
      }]
    }
  }
  render() {
    const { returnedData } = this.state;

    const data = returnedData.map(row => ({
      TenantId: row.Id,
      TenantUrl: row.TenantDomainUrl
    }))

    const columns = [{
        title: 'Tenant Id',
        dataIndex: 'TenantId',
        key: 'TenantId'
      }, {
        title: 'Tenant Url',
        dataIndex: 'TenantUrl',
        key: 'TenantUrl',
    }];

    return (
      <div>
        <h1>test</h1>
        <Table columns={columns} dataSource={data} />
      </div>
    );
  }
}

```