如何将嵌套的 JSON 数据结构简化为映射 JavaScript

Question

我已经通过循环为下面的问题实现了解决方案，但我相信有更好的方法。请考虑以下数据结构：

let arr = [
{
"id": "000701",
"status": "No Source Info",
"sources": []
},
{
"id": "200101",
"status": "Good",
"sources": [
{
"center": "H2",
"uri": "237.0.1.133",
"program": 1,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
}
]
},
{
"id": "005306",
"status": "Good",
"sources": [
{
"center": "H1",
"uri": "237.0.6.5",
"program": 3,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
},
{
"center": "H1",
"uri": "237.0.6.25",
"program": 3,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
}
]
}
]

我想学习最有效的方法，将其简化为仅包含嵌套uri的键值对的映射，并从sources数组中state值。最终结果应如下所示：

let stateMap = {
"237.0.1.133": { "authState": "authorized", "lockState": "locked" },
"237.0.6.5": { "authState": "authorized", "lockState": "locked" },
"237.0.6.25": { "authState": "authorized", "lockState": "locked" } 
}

我有一个部分解决方案，它返回每个source数组的映射，但我正在努力将其全部放入一个结构中。

let allStates = arr.reduce((acc, object) => {
if (object.sources.length) {
let sourceMap = object.sources.reduce((map, obj) => {
map[obj.uri] = obj.state
return map
}, {})
acc[acc.length] = sourceMap
return acc
}
// delete all unused keys and somehow flatten the objects?
}, {})

递归在这里是一种选择，还是更好的方法？

Answer 1

下面的代码首先对嵌套的sources数组执行flatMap操作，然后将所有内容简化为所需的结果对象：

const result = arr.reduce((a, {sources}) => [...a, ...sources], [])
.reduce((a, {uri, state}) => ({...a, [uri]: state}), {});

完整片段：

const arr = [{
"id": "000701",
"status": "No Source Info",
"sources": []
},
{
"id": "200101",
"status": "Good",
"sources": [{
"center": "H2",
"uri": "237.0.1.133",
"program": 1,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
}]
},
{
"id": "005306",
"status": "Good",
"sources": [{
"center": "H1",
"uri": "237.0.6.5",
"program": 3,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
},
{
"center": "H1",
"uri": "237.0.6.25",
"program": 3,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
}
]
}
];
const result = arr.reduce((a, {sources}) => [...a, ...sources], [])
.reduce((a, {uri, state}) => ({...a, [uri]: state}), {});
console.log(result)

Answer 2

您可以减少外部数组并迭代sources并将对象更新为结果集。

var data = [{ id: "000701", status: "No Source Info", sources: [] }, { id: "200101", status: "Good", sources: [{ center: "H2", uri: "237.0.1.133", program: 1, status: "Good", state: { authState: "authorized", lockState: "locked" } }] }, { id: "005306", status: "Good", sources: [{ center: "H1", uri: "237.0.6.5", program: 3, status: "Good", state: { authState: "authorized", lockState: "locked" } }, { center: "H1", uri: "237.0.6.25", program: 3, status: "Good", state: { authState: "authorized", lockState: "locked" } }] }],
stateMap = data.reduce(
(o, { sources }) => (sources.forEach(({ uri, state }) => o[uri] = state), o),
Object.create(null)
);
console.log(stateMap);

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

递归在这里是一种选择，还是更好的方法？

否，因为您只有一个嵌套级别。

Answer 3

您可以使用嵌套reduce一个从列表中的项中获取URI映射，另一个用于获取源映射的值。

const mappedArray = arr.reduce((acc, item) => ({
...acc,
...item.sources.reduce((accSource, itemSource) => ({
...accSource,
[itemSource.uri]: itemSource.state,
}), {})
}), {})

let arr = [
{
"id": "000701",
"status": "No Source Info",
"sources": []
},
{
"id": "200101",
"status": "Good",
"sources": [
{
"center": "H2",
"uri": "237.0.1.133",
"program": 1,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
}
]
},
{
"id": "005306",
"status": "Good",
"sources": [
{
"center": "H1",
"uri": "237.0.6.5",
"program": 3,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
},
{
"center": "H1",
"uri": "237.0.6.25",
"program": 3,
"status": "Good",
"state": {
"authState": "authorized",
"lockState": "locked"
}
}
]
}
]
const mappedArray = arr.reduce((acc, item) => ({
...acc,
...item.sources.reduce((accSource, itemSource) => ({
...accSource,
[itemSource.uri]: itemSource.state,
}), {})
}), {})
console.log(mappedArray)