首页 > 解决方案 > 标准化 javascript 对象数组中的键

问题描述

我正在处理来自 web 服务的 JSON 响应,如果值为 null,则该响应会丢弃密钥。这种做法足够合理,但我将响应用作报告组件的数据源,该组件使用对象数组中的第一个值作为其余对象中所有可用字段的真实来源。

报告组件正在调用我编写和控制的无服务器 JavaScript 端点。因此,我可以在发送响应之前处理结果并可能在此 js 代码中标准化 JSON 对象键。

更棘手的是,数据的形状和/或字段是可变的。它是用户提供的 GraphQL 查询的结果。

所以这样的查询:

    query GetCustomersByState($state: String!) {
      Customer(where: { State: { _eq: $state } }) {
        CustomerID
        CustomerName
        Address1
        Address2
        City
        State
        Zip
      }
    }

可能导致:

[
    {
      CustomerID: 'TENASPH',
      CustomerName: 'Tennessee Asphalt',
      Address1: '123 main st',
      City: 'Somewhere',
      State: 'TN'
    },
    {
      CustomerID: '10002',
      CustomerName: 'A&N Drywall',
      Address1: '123 Drywall Ln',
      Address2: 'Suite 2',
      City: 'Somewhere',
      State: 'TN',
      Zip: '12345'
    },
    {
      CustomerID: 'JONES',
      CustomerName: 'Jones Bros Construction',
      City: 'Somewhere',
      State: 'TN',
      Zip: '37917'
    },
]

如何标准化对象数组中的键?

(如果有帮助,数据源是 Hasura GraphQL 服务器实例。我查看了 Hasura 界面,似乎找不到任何会在响应中包含空格的设置。如果确实存在,那就太好了。)

标签: javascriptjsongraphqlhasura

解决方案


您可以通过查找所有唯一的键提前设置键,然后在 map() 中验证它们

let response = [{
    CustomerID: 'TENASPH',
    CustomerName: 'Tennessee Asphalt',
    Address1: '123 main st',
    City: 'Somewhere',
    State: 'TN'
  },
  {
    CustomerID: '10002',
    CustomerName: 'A&N Drywall',
    Address1: '123 Drywall Ln',
    Address2: 'Suite 2',
    City: 'Somewhere',
    State: 'TN',
    Zip: '12345'
  },
  {
    CustomerID: 'JONES',
    CustomerName: 'Jones Bros Construction',
    City: 'Somewhere',
    State: 'TN',
    Zip: '37917'
  },
]

let keys = [...new Set(response.flatMap(Object.keys))];
//console.log(keys)
let standardized = response.map(e => {
  keys.forEach(k => {
    if (!e[k]) e[k] = '';
  })
  return e
})
console.log(standardized)


推荐阅读