1

我有一系列这样的产品：

[
    {
        "productId":1001,
        "productCategory":"Category 3",
        "productName":"Product 1",
        "productImage":"https://picsum.photos/400?image=976",
        "productStock":false,
        "productPrice":"1318.287"
    },{
        "productId":1002,
        "productCategory":"Category 3",
        "productName":"Product 2",
        "productImage":"https://picsum.photos/400?image=765",
        "productStock":false,
        "productPrice":"4753.309"
    },{
        "productId":1003,
        "productCategory":"Category 3",
        "productName":"Product 3",
        "productImage":"https://picsum.photos/400?image=37",
        "productStock":false,
        "productPrice":"338.270"
    },
]

我想在数组中获取对象内部的键tabaleHeader和数据tableData

我已经尝试过这个及其工作：

const [tableData, setTableData] = useState(data); // data is an array of products
const tableHeader = Object.keys(tableData[0]);

我的问题是这是一个好习惯还是有更好的方法来做到这一点？

4

2 回答 2

1

不，我不会解构对象，因为它是不必要的。使用下面的 JSON，我将展示获取密钥的方式。我通过使用来做到这一点Array.prototype.map

let data = [
  {
    "productId": 1001,
    "productCategory": "Category 3",
    "productName": "Product 1",
    "productImage": "https://picsum.photos/400?image=976",
    "productStock": false,
    "productPrice": "1318.287"
  },
  {
    "productId": 1002,
    "productCategory": "Category 3",
    "productName": "Product 2",
    "productImage": "https://picsum.photos/400?image=765",
    "productStock": false,
    "productPrice": "4753.309"
  },
  {
    "productId": 1003,
    "productCategory": "Category 3",
    "productName": "Product 3",
    "productImage": "https://picsum.photos/400?image=37",
    "productStock": false,
    "productPrice": "338.270"
  }
];
let keys = data.map(i=>Object.keys(i));
console.log(keys);

//Or if you wanted the values
let vals = data.map(i=>Object.values(i));
console.log(vals);

于 2021-03-18T21:15:01.613 回答
0

即使少数元素没有所有键，您也可以使用 reduce 确保它抓取所有键：

const data = [{
    productId: 1001,
    productCategory: 'Category 3',
    productName: 'Product 1',
    productImage: 'https://picsum.photos/400?image=976',
    productStock: false,
    productPrice: '1318.287',
  },
  {
    productId: 1002,
    productCategory: 'Category 3',
    productName: 'Product 2',
    productImage: 'https://picsum.photos/400?image=765',
    productStock: false,
    productPrice: '4753.309',
    bar: 'bar',
  },
  {
    productId: 1003,
    productCategory: 'Category 3',
    productName: 'Product 3',
    productImage: 'https://picsum.photos/400?image=37',
    productStock: false,
    productPrice: '338.270',
    foo: 'foo',
  },
]


const headers = Object.keys(
  data.reduce(
    (acc, curr) => ({
      ...acc,
      ...curr,
    }), {}
  )
)
console.log(headers)

或者，如果第一个元素应该具有所有键：

Object.keys(data?.[0] ?? {})
于 2021-03-18T21:22:40.787 回答