Блог

Я пытаюсь взять полезную нагрузку json и отобразить ее в react-table . Требуемый формат для их таблицы (очень специфичный и) следующий: (это целевой формат, который я пытаюсь создать)

   const rTableObj = [
    {'Col1': row1_col1, 'Col2': row1_col2, 'Col3': row1_col3},
    {'Col1': row2_col1, 'Col2': row2_col2, 'Col3': row2_col3},
    ...
  ]
  

Необработанный объект полезной нагрузки после 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(_.merge(...) , и т.д.), Не приводит меня к цели. Я хочу иметь возможность отправлять любую полезную нагрузку в mapper, чтобы возвращался правильно отформатированный объект. В этом примере это будет выглядеть так:

   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));