使用ES6將對象數組映射到帶有標頭的數組數組

Question

我想將從后端的json響應獲得的對象數組映射到數組數組，第一行是標題（標題）數組。 我將使用此數組將其下載為csv文件。

另外，我想保留一些標題/列，這些標題/列對於最終用戶的csv文件而言並不是很有趣。

我的代碼工作正常，但是我認為可以使用更簡潔的代碼來完成。 我對使用ES6 / ES2015很好，但是我自己對擴展語法和其他ES6優點沒有真正的經驗，因此，對於更好，更現代（功能/響應式）方法的任何建議都將不勝感激。

 const originalData = [ {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'}, {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'}, {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'} ] let headers = [] const firstRow = originalData[0] for (var key in firstRow) { if (firstRow.hasOwnProperty(key)) { if (!['raw','updated_at'].includes(key)) { headers.push(key) } } } const d = originalData.map(function(_, i) { return headers.map(function(header) { return originalData[i][header] }.bind(this)) }.bind(this)) const result = [headers].concat(d) console.log(result) 

Answer 1

像這樣嗎

const originalData = [
  { name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping' },
  { name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail' },
  { name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing' }
]

const headers = Object.keys(originalData[0]).filter(key => !['raw', 'updated_at'].includes(key));
const d = originalData.map(obj => headers.map(key => obj[key]))
const result = [headers, ...d];

console.log(result)

Answer 2

基本上，您可以對過濾后的鍵使用閉包，並映射和連接數組。

 const fn = (array => (keys => [keys].concat(array.map(o => keys.map(k => o[k])))) (Object.keys(array[0]).filter(k => !['raw','updated_at'].includes(k)))), data = [{ name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping' }, { name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail' }, { name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing' }], result = fn(data); console.log(result); 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 3

你的好。 您可以使用Object.keys簡化標題的創建

const originalData = [
  {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'},
  {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'},
  {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'}
]

const headers = Object.keys(originalData[0])
    .filter(key => !['raw','updated_at'].includes(key)));  
const data = originalData.map(row => headers.map(header => row[header]));

console.log(headers, data);

Answer 4

const originalData = [
  {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'},
  {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'},
  {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'}
];

const propertiesNeeded = Object.keys(originalData[0]).filter(prop => !['raw', 'updated_at'].includes(prop));
const dataMapped = originalData.map(obj => propertiesNeeded.map(prop => obj[prop]));
const finalArr = [propertiesNeeded, ...dataMapped];

Answer 5

嘗試使用Array#map使用Object.key和value重新創建數組。 和new Set()方法用戶來創建密鑰集值。忽略重復的值...其傳播語法

 const originalData = [ {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'}, {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'}, {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'} ] var result = [[...new Set(...originalData.map(a=> Object.keys(a)))]].concat(originalData.map(a=> Object.values(a))) console.log(result) 

 .as-console-wrapper { max-height: 100% !important; top: 0; } 

Answer 6

這就是我要做的。 我知道如果您知道要使用哪個鍵，那么我們就可以利用它。

const data = [
  {name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'},
  {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'},
  {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'}
]

const desiredKeys = ['name', 'species', 'age', 'skill']

const result = [desiredKeys].concat(data.map(pet => desiredKeys.map(key => pet[key])))

console.log(result)

Answer 7

我想指出的是，對象的鍵順序並非完全由規范“固定”。

如果您在originalData第一個動物都以一個species屬性開始，則整個表格將按照該列的格式進行格式化...

所以我建議你在陣列中明確定義列，其中為了此事做 。

請注意，在下面的示例中，我交換了Gizmo的屬性聲明順序。 將此數據放入您自己的代碼中，第一列將是種類。 （至少在我的瀏覽器中是這樣，我想它甚至在瀏覽器之間可能也會有所不同？）

 const data = [ {species: 'cat', name: 'Gizmo', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping'}, {name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail'}, {name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing'} ] const getProps = props => obj => props.map(k => obj[k]); const columns = ["name", "species", "age", "skill"]; console.log( [columns, ...data.map(getProps(columns))] ); 

Answer 8

連續代碼中的單個代碼行使用filter和reduce。

 var unborken = chain => chain.filter((_, i, xx) => delete xx[i].updated_at && delete xx[i].raw).reduce((aac, _, i, aa) => (i === 0 ? aac.push(Object.keys(aa[i])) && aac.push(Object.values(aa[i])) : aac.push(Object.values(aa[i])), aac), []); const originalData = [{ name: 'Gizmo', species: 'cat', age: '9', raw: 'G9e76rd', updated_at: '1318874398806', skill: 'sleeping' }, { name: 'Benny', species: 'dog', age: '3', raw: '98HDo2h', updated_at: '1318874392417', skill: 'chasing tail' }, { name: 'Oscar', species: 'cat', age: '2', raw: '9da8Ro1', updated_at: '1318874390283', skill: 'meowing' } ]; console.log(unborken(originalData)); 

 .as-console-wrapper { max-height: 100% !important; top: 0; }