如何用JavaScript将嵌套JSON数组扁平化？-js教程-PHP中文网

如何用JavaScript将嵌套JSON数组扁平化？

碧海醫心

发布： 2025-02-21 12:18:40

原创

856人浏览过

如何用javascript将嵌套json数组扁平化？

JavaScript处理嵌套JSON数组：将多层数据结构转换为扁平化格式

本文介绍如何使用JavaScript将复杂嵌套的JSON数据转换成更易于处理的扁平化结构。

问题：

假设您需要处理如下结构的JSON数据：

立即学习“Java免费学习笔记（深入）”；

<code class="json">{
    "result": [
        {
            "name": "参数1",
            "secondname": [
                "高度",
                "马赫数"
            ]
        },
        {
            "name": "参数2",
            "secondname": [
                "前向",
                "垂向",
                "侧向"
            ]
        }
    ]
}</code>

登录后复制

目标是将其转换为以下扁平化格式：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

<code class="json">{
    "result": [
        {
            "name": "参数1",
            "secondname": "高度"
        },
        {
            "name": "参数1",
            "secondname": "马赫数"
        },
        {
            "name": "参数2",
            "secondname": "前向"
        },
        {
            "name": "参数2",
            "secondname": "垂向"
        },
        {
            "name": "参数2",
            "secondname": "侧向"
        }
    ]
}</code>

登录后复制

解决方案：

利用reduce和map方法可以高效地实现这一转换。

<code class="javascript">const jsonData = {
    "result": [
        {
            "name": "参数1",
            "secondname": [
                "高度",
                "马赫数"
            ]
        },
        {
            "name": "参数2",
            "secondname": [
                "前向",
                "垂向",
                "侧向"
            ]
        }
    ]
};

const flattenedData = {
    result: jsonData.result.reduce((accumulator, currentItem) => {
        return accumulator.concat(currentItem.secondname.map(secondName => ({
            name: currentItem.name,
            secondname: secondName
        })));
    }, [])
};

console.log(flattenedData);</code>

登录后复制

代码解释：

jsonData.result.reduce((accumulator, currentItem) => ... , [])：reduce方法迭代jsonData.result数组。accumulator累积结果，初始值为一个空数组[]。currentItem代表当前迭代的元素。
currentItem.secondname.map(secondName => ({ name: currentItem.name, secondname: secondName }))：map方法迭代currentItem.secondname数组，为每个secondname创建一个新对象，包含name和secondname属性。
accumulator.concat(...)：将新创建的对象数组添加到accumulator中。