时间戳

首页 > 解决方案 > JS：如果所有嵌套值都等于null，则删除对象键

javascript - JS：如果所有嵌套值都等于null，则删除对象键

问题描述

从给定的数据结构（json 文件）中，我基本上需要渲染一个表。不应呈现空行和/或列。我对 JavaScript 相当陌生，并尝试了不同的方法（转换为数组并使用 .map()、reduce()、.filter()、lodash 等）但没有成功。我什至不知道解决问题的最佳方法是什么。（或者可能的搜索词是什么。）

“行键”（例如：mo、tu、we、th、fr）和“列键”（john、hane、doe）都不是已知的并且可以变化。

完整示例：https ://jsbin.com/rafeyasena/edit?js,output

"groupA": {
    "mo": { "john": 8, "jane": 5, "doe": null },
    "tu": { "john": 8, "jane": 5, "doe": null },
    "we": { "john": 5, "jane": 9, "doe": null },
    "th": { "john": 6, "jane": 3, "doe": null },
    "fr": { "john": null, "jane": null, "doe": null }
  }

可能产生的数据结构

const header = ["John", "Jane"];
const content = [
 "mo": {[ 8, 5 ]},
 "tu": {[ 8, 5 ]},
 "we": {[ 5, 9 ]},
 "th": {[ 6, 3 ]}
]

预期结果（前端，反应）：

   | John | Jane |
---|------|--------
mo |  8   |  5   |
tu |  8   |  5   |
we |  5   |  9   |
th |  6   |  3   |

到目前为止我尝试了什么：我能够删除 null 的所有值和相应的键，如果它不再包含键/值（删除嵌套 javascript 对象中的空值） - 让我面临找出所有问题的挑战剩余的键来构建表头。（在下面的示例中，这将只有 John 和 Jane - 所以基本上是一种遍历所有键并记录至少存在一次的每个键的方法）。所以我当前的数据看起来像这样（但我不确定这是否是最好的方法）：

"groupA": {
    "mo": { "john": 8, "jane": 5, },
    "tu": { "john": 8, "jane": 5, },
    "we": { "john": 5, "jane": 9, },
    "th": { "john": 6, "jane": 3, }
  }

标签： javascriptjsonobjectjavascript-objects

解决方案

我认为创建后一种格式（删除空值）是非常有用的第一步。从那里你可以写这样的东西来把它变成你的目标格式的变体：

const uniqKeys = (obj) => [... new Set(Object.values(obj).flatMap(Object.keys))]

const transform = (group, headers = uniqKeys(group)) => ({
  headers,
  content: Object.entries(group).reduce(
    (a, [k, v]) => ({...a, [k]: headers.map(h => v[h])}),
    {}
  )
})


const groupA = {mo: {john: 8, jane: 5}, tu: {john: 8, jane: 5}, we: {john: 5, jane: 9}, th: {john: 6, jane: 3}}

console.log(transform(groupA))

请注意，目标与您的请求略有不同，因为您的示例内容不是合法的 JS（{[ 8, 5 ]}没有意义），但我认为它抓住了它的精神，返回如下内容：

{
  headers: ['john', 'jane'],
  content: {
    mo: [8, 5],
    tu: [8, 5],
    we: [5, 9],
    th: [6, 3]
  }
}

请注意，此函数比要求更通用，因为您可以为其提供标题列表并仅从数据中提取这些标题。

推荐阅读