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] || ''}))
        )

（还要注意，我不知道是否有一个单独的头节点，如我在这里所示。但是，如果没有，则可以将结果和行连接到一个数组中。）

Answer 2

由于要针对这种实际情况提供通用解决方案，仍然需要进行大量配置才能满足特定要求。

您可以在处理此类数据时遵循这种方法：

 var data=[{  
      "id":"35078",
      "employee_name":"hspl200",
      "employee_salary":"0",
      "employee_age":"0",
      "profile_image":""
   },{

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

 const newData=data.map((item)=>{
   return {
     row:Object.values(item).map((val)=>{
       return {'cell':val}
     })
   }
 })
console.log(newData)

Javascript操作/转换JSON

2 个答案: