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

Question

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

这是 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"]
        };

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

Answer 1

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

const firstArray = [],
    secondArray = [];

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

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

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

Answer 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));

Answer 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: {} });

Answer 4

这是用打字稿编写的示例代码，可提供上述输出。

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)

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

How do I extract two arrays from a JSON with nested objects

json

multidimensional-array

reactjs