javascript - 标准化 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 界面,似乎找不到任何会在响应中包含空格的设置。如果确实存在,那就太好了。)
解决方案
您可以通过查找所有唯一的键提前设置键,然后在 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)
推荐阅读
- vue.js - 我无法使用 Vuex 在 Vue 中使用 mapState 获取数据
- visual-studio - 在 Visual Studio 上手动配置 SFML
- python - Python:为什么 .str.contains() 只返回 26 行中的 4 行的结果?
- c# - await Task.WhenAll() 似乎是死锁
- android - 以编程方式生成的布局
- android - Flutter 在新的位置包上运行抛出错误
- wordpress - 带有简码的前端的 Wordpress 类别描述
- javascript - 是否有为 IE11 设置 babel/webpack 的简单来源?
- javascript - 通过Javascript更改元素的显示?
- osgi - OSGI 导入包问题