如何在 React Material UI 数据网格上呈现嵌套的 JSON 数据。在附加的沙箱中,我想在数据网格上显示来自 json 的用户的电话号码-Nested JSON Data Grid
答案 0 :(得分:4)
为了解决这个问题,让我们看看 params
函数中传入的 valueGetter
对象。记录下来,你会在它下面找到一个 row
对象。您应该访问 params.getValue()
对象,而不是使用 row
。似乎 params.getValue()
只能用于一级 JSON 对象。这是输出 phone
字段的代码片段。
{
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。
答案 1 :(得分:3)
我在我的项目中使用它:
{
field: 'idMaintenancePlan',
headerName: 'Plan de maintenance',
sortable: false, width: 200,
valueFormatter: (params) => params.row?.maintenancePlan?.name
}
答案 2 :(得分:0)
这对我来说很好
{ field: 'parserInfo', headerName: 'Parser Title', valueFormatter: ({ value }) => value.title }
答案 3 :(得分:0)
这也很好用
{
field: "family",
headerName: "Family",
width: 150,
renderCell: (params) => {
return <div className="rowitem">{params.row.family.name}</div>;
},
},