CODEWITHSUNDEEP
javascriptnode.jsarraysreactjs
user15608655
user15608655

Reputation:

how to grap the content of an array inside an array of objects

I am having an array with an object that contains another array. I would like to get the content of the array inside that object into a new variable.

I want to have a variable ImagesPath that can grab all the image path inside image_path. How map can do this trick?

Below is the example

"Post": [
            {
                "_id": "61e0ef1383423c55d0e18fa5",
                "Name": "Post1",
                "Images": [
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&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%3D&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%3D&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%3D&auto=format&fit=crop&w=1350&q=80",
                        "_id": "62e0ef1383423c55d0e18fa7",
                    },
                ],
                "createdAt": "2022-01-14T03:33:39.641Z",
                "updatedAt": "2022-01-14T03:33:39.641Z"
            }, 

]

My expected output:

Have a variable grab all the image path at one place:

ImagePath = [
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&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%3D&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%3D&auto=format&fit=crop&w=1350&q=80",
                        "_id": "64e0ef1383423c55d0e18fa7",
                    },
 {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                        "_id": "62e0ef1383423c55d0e18fa7",
                    }
                ]

Upvotes: 0

Views: 49

Answers (3)

A1exandr Belan
A1exandr Belan

Reputation: 4780

For examlpe list of images _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%3D&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%3D&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%3D&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%3D&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}

Upvotes: 0

kevintechie
kevintechie

Reputation: 1521

If you can use map and another method, then this is a more functional approach:

const data = {
    "Post": [
        {
            "_id": "61e0ef1383423c55d0e18fa5",
            "Name": "Post1",
            "Images": [
                {
                    "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&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%3D&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%3D&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%3D&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);

Upvotes: 0

swimshahriar
swimshahriar

Reputation: 685

If you want to use map. Then this is a way to solve your problem.

const arr = [
            {
                "_id": "61e0ef1383423c55d0e18fa5",
                "Name": "Post1",
                "Images": [
                    {
                        "image_path": "https://images.unsplash.com/photo-1523438097201-512ae7d59c44?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&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%3D&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%3D&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%3D&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);

Upvotes: 1

Related Questions