具有嵌套数据的材质 UI 数据网格答案

【问题标题】：Material UI datagrid with nested data具有嵌套数据的材质 UI 数据网格
【发布时间】：2021-04-12 00:08:47
【问题描述】：

如何在 React Material UI 数据网格上呈现嵌套的 JSON 数据。在附加的沙箱中，我想在数据网格上显示 json 中用户的电话号码-Nested JSON Data Grid

【问题讨论】：

嗨，欢迎来到 StackOverflow。请查看How to Ask 并在提问时提供minimal reproducible example。
为什么不扁平化你的 json 对象？
您好，我在@admcfajn 问题中添加了沙箱网址
@JaniceZhong，这只是我想要实现的一个示例......真实数据更复杂
是的@LearnerForever，但如果你在这里创建一个 sn-p，每个人都可以更轻松地协作:)

标签： javascript json reactjs material-ui react-data-grid

【解决方案1】：

为了解决这个问题，让我们看看valueGetter函数中传递的params对象。记录下来，你会在它下面找到一个row 对象。您应该访问row 对象，而不是使用params.getValue()。 params.getValue() 似乎只能用于一级 JSON 对象。这是输出phone字段的代码sn-p。

  {
    field: "phone",
    headerName: "Phone",
    width: 160,
    valueGetter: (params) => {
      console.log({ params });
      let result = [];
      if (params.row.phone) {
        if (params.row.phone.home) {
          result.push("home: " + params.row.phone.home);
        }
        if (params.row.phone.office) {
          result.push("office: " + params.row.phone.office);
        }
      } else {
        result = ["Unknown"];
      }
      return result.join(", ");
    }
  }

更新

为了更灵活地检查对象下的每个键是否存在，我创建了一个辅助方法：

const checkKeysUnderObject = (obj, result) => {
  for (let key in obj) {
    if (key) { // push the value to the result array only if key exists
      result.push(key + ": " + obj[key]);
    }
  }
};

辅助方法的使用：

if (params.row.phone) {
  checkKeysUnderObject(params.row.phone, result);
}else{
  result = ["Unknown"];
}

我还更新了代码框here。

【讨论】：

沙盒返回错误...找不到 ID 为 #firstName 的行
我使用这个解决了这个错误：valueGetter: params => ${params?.params?.row?.firstName || ""} ${params?.params?.row?.lastName || ""}
另外，我们是说排序不是嵌套对象响应的选项吗？我目前对这种方法持观望态度，或者通过一种方法传递 API 响应以将其展平，因此 ,phone:{home:"11", office:"22" } 将变为 ,phone_home:"11", phone_office:"22"

【解决方案2】：

我在我的项目中使用它：

{ 
    field: 'idMaintenancePlan',
    headerName: 'Plan de maintenance', 
    sortable: false, width: 200, 
    valueFormatter: (params) => params.row?.maintenancePlan?.name 
}

【讨论】：

【解决方案3】：

这对我来说很好用

{ field: 'parserInfo', headerName: 'Parser Title', valueFormatter: ({ value }) => value.title }

【讨论】：

【解决方案4】：

这也很好用

{
     field: "family",
     headerName: "Family",
     width: 150,
     renderCell: (params) => {
       return <div className="rowitem">{params.row.family.name}</div>;
     },
},

【讨论】：

建议：您可以使用代码围栏代替 sn-ps，因为此处的 sn-p 功能不是必需的，还可以添加语言标识符以根据语言突出显示代码并使其更具可读性