将 json 映射到反应表答案

【问题标题】：mapping json into react table将 json 映射到反应表
【发布时间】：2021-11-03 20:31:58
【问题描述】：

我想我的问题很简单，但我自己无法弄清楚。我正在尝试将 json 对象映射到反应表中。每个键代表一列，数组中的每个值都是一行。我应该如何映射它以实现如下示例的表结构？

Json 结构：

{
  "code": [
    "111111",
    "222222",
    "333333"
  ],
  "name": [
    "nameA",
    "nameB",
    "nameB"
  ],
  "price": [
    1,
    2,
    3,
  ]
}

表格的结构应该是这样的：

code	name	price
111111	nameA	1
222222	nameB	2
333333	nameC	3

【问题讨论】：

你的意思是react-table.tanstack.com/docs/api/useTable#usetable？请附上minimal reproducible example 并向我们展示一些不起作用的代码以及调试日志，以便我们帮助解决特定问题。
提供您想要重构的示例数据
请提供足够的代码，以便其他人更好地理解或重现问题。
我认为 rob 在下面的评论正是抓住了我的问题的重点。我不确定用这种结构将 json 迭代到表中的最佳方法是什么。

标签： javascript reactjs json

【解决方案1】：

这样的东西适用于你的 js 对象或 json 结构 . 问题是你的结构应该改变以使其更容易迭代。

    class Table extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                
            }
        }
        
        render() {
            var abc={
                "code": [
                    "111111",
                    "222222",
                    "333333"
                ],

                "name": [
                    "nameA",
                    "nameB",
                    "nameB"
                ],
                "price": [
                    1,
                    2,
                    3,
                ]
            }
            
            var trArr=[]
            var tb=function(){
                    abc.code.map(function(v,i){
                            trArr.push(
                                <tr key={i}>
                                    <td>{abc.code[i]}</td>
                                    <td>{abc.name[i]}</td>
                                    <td>{abc.price[i]}</td>
                                </tr>   
                            )
                    })
            
                    return(
                                    <table>
                            <thead> 
                            <tr><th>code</th><th>name</th><th>price</th></tr>
                            </thead>
                            <tbody>
                            {trArr}
                            </tbody>
                        </table>

                    )

            }()
        
            return (
            <div>
                {tb}
            </div>
            )
        }
}

您的结构应该看起来更像这样，因此您可以将其作为单独的容器记录进行迭代/映射，而不是将列/值拆分到单独的数组中

[{
    "code": "11111",
    "name": "nameA",
    "price": 1
  },
  {
    "code": "22222",
    "name": "nameB",
    "price": 2
  },
  {
    "code": "33333",
    "name": "nameC",
    "price": 3
  }
 ]

【讨论】：

abc.code.map() 的使用很奇怪，map 总是会创建一个您不使用的新数组。改用abc.code.forEaxh() 会更有意义。或者使用map，然后创建trArr（所以没有push）
@PeterB ，同意。这并不意味着是完美的代码，而是为了说明为什么 JSON 结构更难迭代，因为主要问题似乎更多关于结构/模式。在生产中使用什么数组迭代方法取决于他/她，在我自己的代码中是老派，我倾向于仍然使用 while 循环。我也习惯性地使用地图，除非我努力提高资源效率。
谢谢。这正是我试图找出的。