如何从带有嵌套对象的 JSON 中提取两个数组答案

【问题标题】：How do I extract two arrays from a JSON with nested objects如何从带有嵌套对象的 JSON 中提取两个数组
【发布时间】：2022-01-11 21:56:54
【问题描述】：

我正在尝试在 ReactJs 中生成一个菜单和一个子菜单。数据来自外部 api，格式为 JSON。

这是 JSON 数据：

[
    {
        "content": "A",
        "Subtypes": [
            {
                "content": "1"
            },
            {
                "content": "2"
            },
            {
                "content": "3"
            }
        ]
    },
    {
        "content": "B",
        "Subtypes": [
            {
                "content": "10"
            },
            {
                "content": "20"
            },
            {
                "content": "30"
            },
            {
                "content": "40"
            }
        ]
    },
    {
        "content": "C",
        "Subtypes": [
            {
                "content": "X"
            },
            {
                "content": "Y"
            },
            {
                "content": "Z"
            }
        ]
    }
]

我想从上面的 JSON 数据生成两个数组，类似于下面的：

Array1 = ["A","B","C"]

Array2 = {
            A: ["1", "2", "3"],
            B: ["10", "20", "30", "40"],
            C: ["X", "Y", "Z"]
        };

我怎样才能做到这一点？谢谢。

【问题讨论】：

你所说的Array2 不是一个数组，它是一个对象。你有什么尝试吗？如果您没有具体说明您尝试了什么，我们只能为您完成工作，而不是给您上一课。使用json.map(o => o.content) 可以轻松实现Array1。请参阅stackoverflow.com/help/how-to-ask 使用我上面建议的知识来创建您想要的对象。您可能想使用Array#reduce 而不是映射
你是对的，Array2 是一个对象。我尝试过使用 reduce 函数，但在创建第二个对象时似乎没有实现。
那你为什么不发布你到目前为止所尝试的？这是提出好问题的基本原则之一，如上面的链接中所述。然后我们可以告诉你你的问题是什么，而不是像现有的答案那样仅仅为你写一个解决方案，它们并不能帮助你理解你做错了什么。

标签： reactjs json multidimensional-array

【解决方案1】：

我不确定这是否是您需要的，因为您提到了两个数组，而示例中的 array2 是一个对象

const firstArray = [],
    secondArray = [];

json.forEach(({
    content,
    Subtypes
}) => {
    firstArray.push(content);
    secondArray.push(Subtypes.map(({
        content
    }) => content));
});

如果您的意思是第二个数组的对象，您可以将其更新为

secondArray[content] = Subtypes.map(({content}) => content);

【讨论】：

请不要将对象称为数组！此外，有一百万种方法可以做到这一点，您应该让 OP 真正尝试一下，而不是仅仅为他们工作。教他们如何钓鱼。
@JuanMendes 我明白你想要暗示什么，下次我会这样做:) 回复：调用对象数组 - 只是引用 OP 当前的示例，我不会更多地关注这一点。

【解决方案2】：

要唯一地过滤一个对象，最好的方法是使用该唯一键创建一个对象，并继续将数据附加到该唯一键，如下所示。

const obj = {}
  const data = [
    {
        "content": "A",
        "Subtypes": [
            {
                "content": "1"
            },
            {
                "content": "2"
            },
            {
                "content": "3"
            }
        ]
    },
    {
        "content": "B",
        "Subtypes": [
            {
                "content": "10"
            },
            {
                "content": "20"
            },
            {
                "content": "30"
            },
            {
                "content": "40"
            }
        ]
    },
    {
        "content": "C",
        "Subtypes": [
            {
                "content": "X"
            },
            {
                "content": "Y"
            },
            {
                "content": "Z"
            }
        ]
    }
]

data.forEach(el => obj[el.content] = el.Subtypes.map(e => e.content));
console.log(obj);
console.log(Object.keys(obj));

【讨论】：

@JuanMendes 已更新。从 map() 函数更改为 forEach() 因为它会导致不返回任何内容的 eslint 错误。

【解决方案3】：

下面的代码给出你想要的输出，var ff 是数组

ff.reduce((accm, cv, cidx, arr) => {
   accm.array1.push(cv.content);
   accm.array2[cv.content] = cv.Subtypes.map(t => t.content);
   return accm;
}, { array1: [], array2: {} });

【讨论】：

为什么要添加另一个解决方案？解决OP的问题有两个答案？

【解决方案4】：

这是一个用 typescript 编写的示例代码，提供上述输出。

let s = [
    {
        "content": "A",
        "Subtypes": [
            {
                "content": "1"
            },
            {
                "content": "2"
            },
            {
                "content": "3"
            }
        ]
    },
    {
        "content": "B",
        "Subtypes": [
            {
                "content": "10"
            },
            {
                "content": "20"
            },
            {
                "content": "30"
            },
            {
                "content": "40"
            }
        ]
    },
    {
        "content": "C",
        "Subtypes": [
            {
                "content": "X"
            },
            {
                "content": "Y"
            },
            {
                "content": "Z"
            }
        ]
    }
]



type subType = {
    [k: string]: any
}
let contentList: string[] = []
let obj: subType = {};
s.forEach((c) => {
    contentList.push(c.content);
    obj[c.content] = [];
    c.Subtypes.forEach((e) => {
         obj[c.content].push(e.content);
    });
})

console.log(obj)
console.log(contentList)

【讨论】：