將 API 響應（對象）轉換為 React JS 中的數組

Question

嘗試使用 mui 數據表。 已設法使用示例數據使用它。 我想更改它而不是我的示例數據值，以便我使用來自 API 的響應，即 this.props.meeting。

API 響應 >> 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",
    } ]
 

完整組件

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

我不確定這是否是您要找的。 看看我的代碼。 首先，您需要創建一個與所有會議長度相同的新數組（具有等效的日期鍵）。 然后您需要展平數組以僅獲取值，然后將它們與日期鍵合並。

 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 數據表自行處理。