Javascript 操作/转换 JSON

Question

我目前有一个 React 组件，它接受如下所示的数据。正如您可能已经猜到的那样，这是为了。数据表。

const data = {
        rows: [
            {row: [
                {cell:'abc2'},
                {cell:'abc2'},
                {cell:'abc2'}, 
                {cell:'abc2'}, 

            ]},
            {row: [
                {cell:'abc'},
                {cell:'abc'},
                {cell:'abc'}, 
                {cell:'abc'}, 

            ]},
        ]
    }

现在。我想以某种方式构建一个可以将任何形式的数据转换为该模式的函数。例如。鉴于以下情况:

   {  
      "id":"35078",
      "employee_name":"hspl200",
      "employee_salary":"0",
      "employee_age":"0",
      "profile_image":""
   }

我想将其转换为基于单元格的行对象，这将成为:

   {row: [ 
      {cell:"35078"},
      {cell:"hspl200"},
      {cell:"0"},
      {cell:"0"},
      {cell:""}
   ]},

等等。每次我需要这种格式的数据表数据时，我都可以编写一些自定义的东西，但最终可能存在更好的解决方案来将 json 对象从一种模式塑造/转换为另一种模式。

为了以更可重用的方式实现这一点，我应该研究哪些库/技术等？

Answer 1

这是将一个对象变成一行的简单方法:

const makeRow = (value) => ({
  row: Object.values(value).map(val => ({cell: val}))
})

const value = {"id":"35078","employee_name":"hspl200","employee_salary":"0","employee_age":"0","profile_image":""}

console.log(makeRow(value))

但是如果你真的不知道你的结构，你可以写这样的东西来将相似对象的集合变成那种数据风格(的轻微变体):

const vals = [
  {"id":"35078","employee_name":"hspl200","employee_salary":"0","employee_age":"35","profile_image":"pic1.jsp"},
  {"id":"35079","employee_name":"hr4f302","employee_salary":"1","foobar":"baz","profile_image":"pic2.jpg"},
]

const makeTable = (values) => {
  // get the superset of all objects' property names.
  const headers = [...values.reduce(
    (s, v) => Object.keys(v).reduce((s, k) => s.add(k), s),
    new Set()
  )]
  return {
    data: {
      headers: headers.map(h => ({cell: h})),
      rows: values.map(
        value => ({
          row: headers.map(h => ({cell: value[h] || ''}))
        })
      )
    }
  }
}

console.log(makeTable(vals))

请注意，虽然对象的键有很多重叠，但它们并不完全相同。这使用空字符串来报告 nil 值，尽管您可以删除 || '' 来阻止它。

您建议的输出似乎有额外不必要的嵌套级别。也许这是您的数据表格式的要求，但如果没有，您可以通过将相关行替换为

来删除嵌套的 row 属性

        value => (
          headers.map(h => ({cell: value[h] || ''}))
        )

(另请注意，我不知道是否有单独的标题节点，就像我在此处显示的那样。但如果没有，您可以将该结果和行连接到一个数组中。)