如何從帶有嵌套物件的JSON中提取兩個陣列

我正在嘗試在 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"]
        };

我怎樣才能做到這一點？謝謝。

uj5u.com熱心網友回復：

我不確定這是否是您需要的，因為您提到了兩個陣列，而示例中的 array2 是一個物件

const firstArray = [],
    secondArray = [];

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

如果您的意思是第二個陣列的物件，則可以將其更新為

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

uj5u.com熱心網友回復：

下面的代碼給出了你想要的輸出，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: {} });

uj5u.com熱心網友回復：

這是一個用打字稿撰寫的示例代碼，給出了上述輸出。

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)

uj5u.com熱心網友回復：

要唯一過濾物件，最好的方法是使用該唯一鍵創建一個物件，并繼續將資料附加到該唯一鍵，如下所示。

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

標籤：反应 json 多维数组

上一篇：在Vue專案中使用AXIOS訪問本地主機

下一篇：使用python洗掉json檔案中非英文專案的行