Reactjs 使用从两个列表创建的对象在React中创建数组

我试图获取一个json负载，并将其绘制在

react表中。他们的表所需的格式如下（非常具体：（这是我试图创建的目标格式）

原始有效负载对象在
fetch（url）
和
response.json
之后显示为：

  rawPayload:
    Names: {0: "Rebecca", 1: "Sally", 2: "Sally", 3: "Charlie", ...}
    Nums: {0: 11, 1: 16, 2: 8, 3: 12, ...}
    Range: {0: 0, 1: 1, 2: 2, 3: 3, ...}

我可以提取列名，这样（在本例中）
colNames=['names'、'Nums'、'Range']
，我可以将值提取到它们自己的对象中，如下所示：

  vals: Array(3)
    0: {0: "Rebecca", 1: "Sally", 2: "Sally", 3: "Charlie", ...}
    1: {0: 11, 1: 16, 2: 8, 3: 12, ...}
    2: {0: 0, 1: 1, 2: 2, 3: 3, ...}

但是我尝试的一切（
.map（…）
，
[].concat（uu.merge（…）
，等等）都无法到达目标。我希望能够将任何有效负载发送到映射器，以便返回格式正确的对象。对于本例，如下所示：

  const rTableObj = [
    {'Names': "Rebecca", 'Nums': 11, 'Range': 0},
    {'Names': "Sally", 'Nums': 16, 'Range': 1},
    ...
  ]

试试这个：
已编辑：因此它可以动态使用不同的列名

rawPayload = {
  Names: { 0: "Rebecca", 1: "Sally", 2: "Sally", 3: "Charlie" },
  Nums: { 0: 11, 1: 16, 2: 8, 3: 12 },
  Range: { 0: 0, 1: 1, 2: 2, 3: 3 },
  Age: { 0: 20, 1: 21, 2: 22, 3: 23 }
};

const tableMap = (rawPayload) => {
  let colNames = Object.keys(rawPayload);
  let length = Object.values(rawPayload[colNames[0]]).length

  let rTableObj = [];
  for (let i = 0; i < length; i++) {
    var entry = {};
    for (let j = 0; j < colNames.length; j++) {
      var name = colNames[j];
      entry[name] = rawPayload[name][i];
    }
    rTableObj.push(entry);
  }
  return rTableObj;
};

console.log(tableMap(rawPayload));

rawPayload={
姓名：{0:“丽贝卡”，1:“莎莉”，2:“莎莉”，3:“查理”}，
Nums:{0:11,1:16,2:8,3:12}，
范围：{0:0,1:1,2:2,3:3}，
年龄{0:20,1:21,2:22,3:23}
};
const tableMap=（rawPayload）=>{
让colNames=Object.keys（rawPayload）；
let length=Object.values（rawPayload[colNames[0]]）.length
设rTableObj=[]；
for（设i=0；i
谢谢你的回答-我尽量不硬编码列名，先提取它们，然后使用它们。有没有办法从函数中的colNames数组中提取它们？比如
colNames=['names'，'Nums'，'Range']
？@WaveRider编辑以动态处理列名很好！需要做一个更改：行中的列名仍有一个依赖项
let length=Object.values（rawPayload[“names”]）.length；
，可以/应该更改为：
const length=Object.values（rawPayload[colNames[0]]）.length；
…然后您就赢了奖；）…谢谢！
rawPayload = {
  Names: { 0: "Rebecca", 1: "Sally", 2: "Sally", 3: "Charlie" },
  Nums: { 0: 11, 1: 16, 2: 8, 3: 12 },
  Range: { 0: 0, 1: 1, 2: 2, 3: 3 },
  Age: { 0: 20, 1: 21, 2: 22, 3: 23 }
};

const tableMap = (rawPayload) => {
  let colNames = Object.keys(rawPayload);
  let length = Object.values(rawPayload[colNames[0]]).length

  let rTableObj = [];
  for (let i = 0; i < length; i++) {
    var entry = {};
    for (let j = 0; j < colNames.length; j++) {
      var name = colNames[j];
      entry[name] = rawPayload[name][i];
    }
    rTableObj.push(entry);
  }
  return rTableObj;
};

console.log(tableMap(rawPayload));