堆栈内存溢出
  简体   繁体   English

如何在对象数组中获取数组的内容

[英]how to grap the content of an array inside an array of objects

 原文  2022-01-14 04:08:51  4   3    javascript/ node.js/ arrays/ reactjs

问题描述

I am having an array with an object that contains another array.我有一个包含另一个数组的 object 数组。 I would like to get the content of the array inside that object into a new variable.我想将 object 中的数组内容放入一个新变量中。

I want to have a variable ImagesPath that can grab all the image path inside image_path.我想要一个可以获取 image_path 中所有图像路径的变量 ImagesPath。 How map can do this trick? map 如何做到这一点？

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:我预期的 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",
                    }
                ]

3 个解决方案

解决方案1
 1  2022-01-14 04:49:05

If you want to use map.如果你想使用 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);

解决方案2
 0  2022-01-14 05:07:46

If you can use map and another method, then this is a more functional approach:如果您可以使用 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%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);

解决方案3
 0  2022-01-14 05:42:00

For examlpe list of images _id例如图像列表_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}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在对象数组中过滤数组？ - How to filter an array inside of an array of objects? 如何发布一个数组，其中包含一组对象？ - How to POST an array with an array of objects inside of it? 如何过滤数组中的对象数组 - how to filter an array of objects inside an array 如何解压对象数组中的数组？ - How to unpack array inside of array of objects? 如何根据另一个数组减少对象数组中的对象数组 - How to reduce an array of objects inside an array of objects based on another array 如何访问 Angular 中对象数组中的数组？ - How to access array inside of an array of objects in Angular? Typescript - 如何提取对象数组中的对象？ - Typescript - How to extract the objects inside an array of objects? 如何在对象数组中传递数组值？ - How to pass Array value inside Array of objects? 如何扫描其他对象内部的对象数组 - How to scan an array of objects inside other objects 如何在另一个对象数组内初始化对象数组？ - How to initialize an array of objects inside of another array of objects?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM