React js将分组列数组转换为普通数组答案

【问题标题】：React js convert grouped column array into normal ArrayReact js将分组列数组转换为普通数组
【发布时间】：2020-03-02 14:27:51
【问题描述】：

我有一个这样的分组数组

this.state.tableData=

[0:{key: "EMAIL",val:  ["john@example.com", "harry@example.com", "howard@example.com"]}
1:{key: "LASTNAME",val:  ["Smith", "Pierce", "Paige"]}
2:{key: "FIRSTNAME",val: ["John", "Harry", "Howard"]}
3:{key: "SMS",val: ["33123456789", "33111222222", "33777888898"]}
]

我想把它转换成普通数组，比如

0: {EMAIL: "john@example.com", LASTNAME: "Smith", FIRSTNAME: "John", SMS: "33123456789"}
1: {EMAIL: "harry@example.com", LASTNAME: "Pierce", FIRSTNAME: "Harry", SMS: "33111222222"}
2: {EMAIL: "howard@example.com", LASTNAME: "Paige", FIRSTNAME: "Howard", SMS: "33777888898"}

我试过下面的代码

this.state.csvHeaders=["EMAIL','FIRSTNAME','LASTNAME']

var contacts=[];
this.state.tableData.map(k => {

        k.val.map(r => {

        Object.keys(this.state.csvHeaders).forEach(key => {

             if(k.val["Col"]==="EMAIL")
             {
                contacts[key]['EMAIL']=r;
             }

        })

        })

    })

但它不起作用....任何建议我还能修改什么。我如何存储，将它们推送到数组？

【问题讨论】：

key 和 val 是否在 JSON 对象中？
@Neeraj Verma 你的 this.state.tableData 是正确的 json 吗？或数组对象
这不是正确的 js 数据结构，尤其是数组在语法上不正确：["Smith", "Pierce", "Paige", Col: "LASTNAME"] - Col: "LASTNAME" 部分不是正确的数组元素。请使用正确的数据结构编辑您的问题
好的，我删除了 col ，现在请告诉我怎么可能？
你已经had a normal array为什么不能用那个？

标签： javascript arrays json reactjs

【解决方案1】：

您可以使用 reduce 和 forEach 来做到这一点：

var tableData = [
  { key: 'EMAIL',val: ['john@example.com','harry@example.com','howard@example.com'],},
  { key: 'LASTNAME', val: ['Smith', 'Pierce', 'Paige'] },
  { key: 'FIRSTNAME', val: ['John', 'Harry', 'Howard'] },
  { key: 'SMS',val: ['33123456789', '33111222222', '33777888898'],},
];

console.log(
  tableData.reduce((result, { key, val }) => {
    val.forEach((val, index) => {
      result[index] = result[index] || {};
      result[index][key] = val;
    });
    return result;
  }, [])
);

【讨论】：

很好的解决方案！:)

【解决方案2】：

按照这些思路应该可以工作：

    const tableData= [
        {key: "EMAIL",val:  ["john@example.com", "harry@example.com", "howard@example.com"]},
        {key: "LASTNAME",val:  ["Smith", "Pierce", "Paige"]},
        {key: "FIRSTNAME",val: ["John", "Harry", "Howard"]},
        {key: "SMS",val: ["33123456789", "33111222222", "33777888898"]},
];
const csvHeaders = ['EMAIL','FIRSTNAME','LASTNAME', 'SMS'];

const contacts = [];
csvHeaders.forEach( (header, idx) => {

        tableData[0].val.forEach( (info, contactPos) => {
                contacts[contactPos] = contacts[contactPos] || {};
                contacts[contactPos][header] =  tableData.find(row => row.key === header).val[contactPos];
        })
})

console.log(contacts);

【讨论】：

0: EMAIL: "john@example.com" FIRSTNAME: "john@example.com" LASTNAME: "john@example.com" SMS: "john@example.com"
对，我没有仔细查看实际结果。我用现在有效的方法更新了代码:)
现在它工作了......完美的解决方案......谢谢......是的，我的语法需要更正......我会做的
等待。我发现了一个错误..如果我将键：“EMAIL”更改为键：“SMS”。 ..然后数组仍然将电子邮件数据推送到其中。这不应该发生
对，我已经更新了代码，让它在tableData中按当前标题搜索。