How to feed Json response into an Empty ant design table? - json

Question

I am quite new to react and want to feed my json response which i got from an api into an empty ant-design table and I am getting no clue on how to do that?
i have already mapped id with name but also want all other columns and into the table format of ant design.
JSon response
[
{
"id": 9685,
"name": "Mukesh Rai",
"count of sub": 3,
"count of int": 2,
"count of po": null
},
{
"id": 2085,
"name": "Abhyudaya Singh Panwar",
"count of sub": 1049,
"count of int": 17,
"count of po": 5
},
{
"id": 7087,
"name": "Amit Kumar Sharma",
"count of sub": 363,
"count of int": 68,
"count of po": 10
},
{
"id": 2100,
"name": "Aditya Kumar",
"count of sub": 724,
"count of int": 5,
"count of po": 1
}
]
component file
componentDidMount(){
axios.get("http://127.0.0.1:8000/marketer_details/")
.then(response=>{
console.log(response)
this.setState({posts: response.data})
})
.catch(error=> {
console.log(error)
})
}
render() {
const { posts } = this.state
return(
<div>
List of Posts
{
posts.length ?
posts.map(post => <div key = {post.id}>{post.name}</div>) :
null
}
</div>
)
//Wanted all other columns as well
render(){
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
width: '30%',
...this.getColumnSearchProps('name'),
},
{
title: 'Count of Submissions',
dataIndex: 'Count',
key: 'sub',
width: '20%',
...this.getColumnSearchProps('sub'),
},
{
title: 'Count of Interviews',
dataIndex: 'Count',
key: 'int',
...this.getColumnSearchProps('int'),
},
{
title: 'Count of PO',
dataIndex: 'Count',
key: 'po',
...this.getColumnSearchProps('po'),
},
];
return <Table columns={columns} dataSource={this.state.posts} />;
}
}
}
export default App
I am unable to understand how the multiple mapping could be done against each column row.

Answer 1

The Table component takes a column structure as argument.
Here, dataIndex refers to the index in the data that is to be referenced for the column, key is intended to remain unique across column names.
In your case, the columns array could be:
const columns = [
{
name: "Name",
dataIndex: "name"
},
{
name: "Count of submissions",
dataIndex: "count of sub"
},
{
name: "Count of interviews",
dataIndex: "count of int"
},
{
name: "Count of PO",
dataIndex: "count of po"
}
];
Codesandbox Demo