Convert API response (object) to array in react JS

Question

Trying to use mui-datatables. Have managed to use it using sample data. Instead of my sample data values, i want to change it so that i use my response from API which is this.props.meeting.

API response >> this.props.meetings

"2021-07-06T00:00:00Z" : [ {
      "type" : "meeting",
      "name" : "Test JP morgan asia meeting",
      "agenda" : "<p>Test</p>",
      "location" : "Test",
      "startOn" : "2021-07-06T07:14:52.563Z",
      "endOn" : "2021-07-06T08:14:52.563Z",
    } ],
"2021-07-01T00:00:00Z" : [ {
      "type" : "meeting",
      "name" : "Future meeting",
      "agenda" : "<p>This is a test meeting session</p>",
      "location" : "Asia",
      "startOn" : "2021-07-01T06:13:00.000Z",
      "endOn" : "2021-07-01T06:54:00.000Z",
    } ]
 

Full Component

class Meeting extends React.Component {
  constructor(props) {
    super(props);
    ...
  }


  render() {
    const {
      meetings,
    } = this.props;
    console.log(this.props.meetings);

    const columns = ['Date', 'Time', 'Title', 'Location', 'Published'];
    const data = [
      ['4 Jul 2021', '12:00PM - 1:00PM', 'Lunch catch up with CEO of MS', 'Test', 'No'],
      ['4 Jul 2021', '2:00PM - 3:00PM', 'Meeting with ICBC Chairman', 'Test', 'No'],
      ['5 Jul 2021', '4:00PM - 5:00PM', 'Discussion with JP Morgan Head of APAC', 'Test', 'No'],
    ];

    const options = {
      ...
    };

    return (
      <MUIDataTable
        title="Meetings"
        data={data}
        columns={columns}
        options={options}
      />
    );
  }
}

....

Answer 1

I'm not sure if this is what you are looking for. Have a look at my code. First of all you need to create a new array which has the same length as all the meetings (with equivalent date keys). Then you need to flatten the arrays in order to get only the values and then merge them with the date key.

 let meetings = { "2021-07-06T00:00:00Z" : [ { "type" : "meeting", "name" : "Test JP morgan asia meeting", "agenda" : "<p>Test</p>", "location" : "Test", "startOn" : "2021-07-06T07:14:52.563Z", "endOn" : "2021-07-06T08:14:52.563Z", } ], "2021-07-01T00:00:00Z" : [ { "type" : "meeting", "name" : "Future meeting", "agenda" : "<p>This is a test meeting session</p>", "location" : "Asia", "startOn" : "2021-07-01T06:13:00.000Z", "endOn" : "2021-07-01T06:54:00.000Z", } , { "type" : "meeting2", "name" : "Future meeting2", "agenda" : "<p>This is a test meeting session</p>", "location" : "Asia", "startOn" : "2021-07-01T06:13:00.000Z", "endOn" : "2021-07-01T06:54:00.000Z", } ] } let arr1 = [] Object.entries(meetings).forEach(ar => ar[1].forEach(ar1 => arr1.push([ ar[0], ar1 ]))) console.log('FINAL ARRAY', arr1.map(obj => [obj[0], Object.values(obj[1])].flat())) console.log('WITH SLICE', arr1.map(obj => [obj[0], Object.values(obj[1])].flat()).map(arr => arr.slice(0, arr.length - 1)))

Answer 2

首先，检查您是 this.props.meetings 对象，它包含与您提供的相同的定义，如果是，那么它将自动呈现并由 mui 数据表自行处理。