javascript - 如何将对象数组转换为特定格式的对象？
问题描述
我一直在努力解决一个我试图以更好的方式解决的问题。基本上我有一个集合，或者更简单地说是一个对象数组。我将把集合粘贴下来：
[
{
"pluginId": "fy9h-dKw",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "win",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
},
{
"pluginId": "fy9h-dKw",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "mac",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
},
{
"pluginId": "fy9h-dKw",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "linux",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
},
{
"pluginId": "fy9h-dKw1",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "win",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
},
{
"pluginId": "fy9h-dKw1",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "mac",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
},
{
"pluginId": "fy9h-dKw1",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "linux",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
},
{
"pluginId": "fy9h-dKw2",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "win",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
}
]
现在我想将它更改为特定格式的原因是我可以将它与一个 UI 库一起使用，该库指示它采用特定格式。我将最终结果粘贴下来：
[
{
"name": "fy9h-dKw", "children": [
{
"name": "4.26", "children": [
{
"name": "1", "children": [
{
"name": "mac", "children": [
{
"pluginId": "fy9h-dKw",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "mac",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
}
],
"name": "windows", "children": [
{
"pluginId": "fy9h-dKw",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "win",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
}
],
"name": "linux", "children": [
{
"pluginId": "fy9h-dKw",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "linux",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
}
],
}
]
}
]
}
]
},
{
"name": "fy9h-dKw1", "children": [
{
"name": "4.26", "children": [
{
"name": "1", "children": [
{
"name": "mac", "children": [
{
"pluginId": "fy9h-dKw1",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "mac",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
}
],
"name": "windows", "children": [
{
"pluginId": "fy9h-dKw1",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "win",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
},
],
"name": "linux", "children": [
{
"pluginId": "fy9h-dKw1",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "linux",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
}
],
}
]
}
]
}
]
},
{
"name": "fy9h-dKw2", "children": [
{
"name": "4.26", "children": [
{
"name": "1", "children": [
{
"name": "mac", "children": [
{
}
],
"name": "windows", "children": [
{
"pluginId": "fy9h-dKw2",
"pluginVersion": 1,
"pcVersion": "4.26",
"platform": "win",
"previews": [
{
"uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg"
}
],
"pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip"
}
],
"name": "linux", "children": [
{
}
],
}
]
}
]
}
]
}
]
为了消除这个最终结果的混乱，我想要的只是按他们的pluginId分组，然后是他们的pcVersion，然后是他们的pluginVersion，最后是他们的platform。我将粘贴最终结果的格式：
[
{
"name": "pluginId", "children": [
{
"name": "pcVersion", "children": [
{
"name": "pluginVersion", "children": [
{
"name": "mac", "children": [
{
}
],
"name": "windows", "children": [
{
}
],
"name": "linux", "children": [
{
}
],
}
]
}
]
}
]
}
]
我发现了很棒的Lodash Library groupBy方法。但是我必须为它写很多坏循环，而且它太复杂了。
我真的很感激任何提示或线索来解决它，因为我已经坚持了很多小时并且变得非常沮丧。提前致谢。
解决方案
这是一个相当紧凑的示例，它使用嵌套reduce()调用并将描述层次结构的键数组传递给内部reduce()。这允许您通过传递不同的层次结构数组以多种方式重构原始数组。
const srcArr = [{ "pluginId": "fy9h-dKw", "pluginVersion": 1, "pcVersion": "4.26", "platform": "win", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw", "pluginVersion": 1, "pcVersion": "4.26", "platform": "mac", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw", "pluginVersion": 1, "pcVersion": "4.26", "platform": "linux", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw1", "pluginVersion": 1, "pcVersion": "4.26", "platform": "win", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw1", "pluginVersion": 1, "pcVersion": "4.26", "platform": "mac", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw1", "pluginVersion": 1, "pcVersion": "4.26", "platform": "linux", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw2", "pluginVersion": 1, "pcVersion": "4.26", "platform": "win", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }]
function refactorArray(arr, tree) {
return arr.reduce((a, o) => {
const inner = tree.reduce((ka, k) => {
const match = ka.find(e => e.name === o[k]);
if (match) {
ka = match.children;
} else {
const n = { name: o[k], children: [] };
ka.push(n);
ka = n.children;
}
return ka;
}, a);
inner.push({ ...o });
return a;
}, []);
}
const tree1 = [
'pluginId',
'pcVersion',
'pluginVersion',
'platform'];
console.log(refactorArray(srcArr, tree1));
const tree2 = [
'platform',
'pluginVersion'];
console.log(refactorArray(srcArr, tree2));或bind()用于创建专用功能...
const srcArr = [{ "pluginId": "fy9h-dKw", "pluginVersion": 1, "pcVersion": "4.26", "platform": "win", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw", "pluginVersion": 1, "pcVersion": "4.26", "platform": "mac", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw", "pluginVersion": 1, "pcVersion": "4.26", "platform": "linux", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw1", "pluginVersion": 1, "pcVersion": "4.26", "platform": "win", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw1", "pluginVersion": 1, "pcVersion": "4.26", "platform": "mac", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw1", "pluginVersion": 1, "pcVersion": "4.26", "platform": "linux", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }, { "pluginId": "fy9h-dKw2", "pluginVersion": 1, "pcVersion": "4.26", "platform": "win", "previews": [{ "uri": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.jpg" }], "pluginUrl": "/e2d4-dKv/4.26/1/7f4bc5e9-3721-4f83-abd4-75792ae75e3d.zip" }]
function refactorArrayByBoundTree(arr) {
return arr.reduce((a, o) => {
const inner = this.reduce((ka, k) => {
const match = ka.find(e => e.name === o[k]);
if (match) {
ka = match.children;
} else {
const n = { name: o[k], children: [] };
ka.push(n);
ka = n.children;
}
return ka;
}, a);
inner.push({ ...o });
return a;
}, []);
}
const tree1 = [
'pluginId',
'pcVersion',
'pluginVersion',
'platform'];
const refactorByTree1 = refactorArrayByBoundTree.bind(tree1);
console.log(refactorByTree1(srcArr));
const tree2 = [
'platform',
'pluginVersion'];
const refactorByTree2 = refactorArrayByBoundTree.bind(tree2);
console.log(refactorByTree2(srcArr));推荐阅读
- json - 无法通过 perl DBI 从 MariaDB 获取返回值
- r - 用 ggplot 为许多变量按组绘制优势比
- spring-boot - 使用 onErrorResume 处理使用 Reactor Kafka 发布到 Kafka 的有问题的有效负载
- r - 删除 igraph 中的最大派系
- azure-virtual-network - 将现有 Azure 容器实例添加到 VNET
- scala - 由于 Databricks 不公开支持 spark-redshift 库，因此使用 Scala spark 从 Redshift 读取/写入 Redshift 的最佳方法是什么
- python - 我在 Heroku 上收到 404 错误，但它在本地工作
- pine-script - 如何使标签在右侧对齐？
- angular - 如何在文本区域内映射键 TAB
- spring-boot - 当原始代码正常工作时，为什么我的单元测试没有通过？