在 React JS 中将 API 响应（对象）转换为数组答案

【问题标题】：Convert API response (object) to array in react JS在 React JS 中将 API 响应（对象）转换为数组
【发布时间】：2021-09-16 19:52:11
【问题描述】：

尝试使用 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}
      />
    );
  }
}

....

【问题讨论】：

您还需要我们在示例数据中看到的格式，还是只是转换为可以被 mui 表解析的数组？
转换成mui表可以解析的数组。
检查我的答案。我想这就是你要找的。span>

标签： javascript reactjs mui-datatable

【解决方案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)))

【讨论】：

是的，这应该可以。让我阅读您的代码并立即尝试一下。谢谢！
如果我们要排除某个列，可以做到吗？例如。 "endOn" : , 使用相同的方法
@user8779054 我在slice 用法中添加了额外的一行

【解决方案2】：

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

【讨论】：