使用 ES6 将 objects 的数组映射到 headers 的数组数组

Question

我想将从后端的 json 响应中获得的 objects 数组映射到数组数组，第一行是 [=28] 的数组=]（标题）。我将使用此数组使其可下载到 csv 文件中。

此外，我想保留一些 headers / 最终用户在他们的 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

你的不错。您可以使用 Object.keys

简化 header 创建

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 2

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 3

试试 Array#map used for recreate the array with Object.key and value . and new Set() method user for create the key set value .ignore the repeated one ... its spread syntax

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 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 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 5

我就是这样做的。我想如果你知道你想要的是哪些键，那么我们就可以充分利用它。

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 6

基本上，您可以对过滤后的键使用闭包并映射和连接数组。

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 7

我想指出，对象的键顺序并不完全 "fixed" 规范。

如果您 originalData 中的第一个动物以 species 属性开头，您的整个 table 将按该列顺序格式化...

因此，我建议您明确定义数组中的列，的顺序很重要。

请注意，在下面的示例中，我交换了 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

使用过滤器和化简的不间断链中的单行代码。

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

使用 ES6 将 objects 的数组映射到 headers 的数组数组

Mapping array of objects to array of arrays with headers using ES6

javascript

arrays

functional-programming

concat

ecmascript-6