如何在物件陣列中獲取陣列的內容

我有一個包含另一個陣列的物件的陣列。我想將該物件內的陣列內容放入一個新變數中。

我想要一個可以獲取 image_path 中所有影像路徑的變數 ImagesPath。地圖如何做到這一點？

下面是示例

"Post": [
            {
                "_id": "61e0ef1383423c55d0e18fa5",
                "Name": "Post1",
                "Images": [
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "66e0ef1383423c55d0e18fa7",

                    },
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "65e0ef1383423c55d0e18fa7",
                    },
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "64e0ef1383423c55d0e18fa7",
                    },
                ],
                "createdAt": "2022-01-14T03:33:39.641Z",
                "updatedAt": "2022-01-14T03:33:39.641Z"
            }, 
            {
                "_id": "62e0ef1383423c55d0e18fa5",
                "Name": "Post2",
                "Images": [
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "62e0ef1383423c55d0e18fa7",
                    },
                ],
                "createdAt": "2022-01-14T03:33:39.641Z",
                "updatedAt": "2022-01-14T03:33:39.641Z"
            }, 

]

uj5u.com熱心網友回復：

如果你想使用地圖。那么這是解決您問題的一種方法。

const arr = [
            {
                "_id": "61e0ef1383423c55d0e18fa5",
                "Name": "Post1",
                "Images": [
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "66e0ef1383423c55d0e18fa7",

                    },
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "65e0ef1383423c55d0e18fa7",
                    },
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "64e0ef1383423c55d0e18fa7",
                    },
                ],
                "createdAt": "2022-01-14T03:33:39.641Z",
                "updatedAt": "2022-01-14T03:33:39.641Z"
            }, 
            {
                "_id": "62e0ef1383423c55d0e18fa5",
                "Name": "Post2",
                "Images": [
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                        "_id": "62e0ef1383423c55d0e18fa7",
                    },
                ],
                "createdAt": "2022-01-14T03:33:39.641Z",
                "updatedAt": "2022-01-14T03:33:39.641Z"
            }, 

]

const imagePath = []
arr.map(item => item.Images.map(path => imagePath.push(path.image_path)));

console.log(imagePath);

uj5u.com熱心網友回復：

如果您可以使用 map 和另一種方法，那么這是一種更實用的方法：

const data = {
    "Post": [
        {
            "_id": "61e0ef1383423c55d0e18fa5",
            "Name": "Post1",
            "Images": [
                {
                    "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                    "_id": "66e0ef1383423c55d0e18fa7",

                },
                {
                    "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                    "_id": "65e0ef1383423c55d0e18fa7",
                },
                {
                    "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                    "_id": "64e0ef1383423c55d0e18fa7",
                },
            ],
            "createdAt": "2022-01-14T03:33:39.641Z",
            "updatedAt": "2022-01-14T03:33:39.641Z"
        },
        {
            "_id": "62e0ef1383423c55d0e18fa5",
            "Name": "Post2",
            "Images": [
                {
                    "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80",
                    "_id": "62e0ef1383423c55d0e18fa7",
                },
            ],
            "createdAt": "2022-01-14T03:33:39.641Z",
            "updatedAt": "2022-01-14T03:33:39.641Z"
        },

    ]
}

const result = data.Post.reduce((previous, post) => {
    const images = post.Images.map((image) => {
        return image.image_path;
    });
    return previous.concat(images);
}, []);
console.log(result);

uj5u.com熱心網友回復：

例如影像串列 _id

const data = {"Post": 
  [{"_id": "61e0ef1383423c55d0e18fa5","Name": "Post1","Images": [
    {"image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80","_id": "66e0ef1383423c55d0e18fa7",},
    {"image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80","_id": "65e0ef1383423c55d0e18fa7",},
    {"image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80","_id": "64e0ef1383423c55d0e18fa7",},],"createdAt": "2022-01-14T03:33:39.641Z","updatedAt": "2022-01-14T03:33:39.641Z"},
  {"_id": "62e0ef1383423c55d0e18fa5","Name": "Post2","Images": [
    {"image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw=&auto=format&fit=crop&w=1350&q=80","_id": "62e0ef1383423c55d0e18fa7",},],"createdAt": "2022-01-14T03:33:39.641Z","updatedAt": "2022-01-14T03:33:39.641Z"},]}

const result = data.Post.flatMap((post) => post.Images.map((image) => image._id))
console.dir(result, {depth: null});

.as-console-wrapper{min-height: 100%!important; top: 0}

標籤：

上一篇：React-無法在“節點”上執行“removeChild”

下一篇：使用“路由”時，React-router-dom不顯示任何內容