javascript - 使用来自父对象的数据展平数组对象内的数组

Question

我想展平嵌套在对象数组的每个对象中的一些数组，以返回带有来自父对象的数据的对象数组。相当一口，但也许一些示例 json 将有助于解释。

我当前的数据和代码是:

const galleries = [
    {
        "gallery": [
            {
                "url": "https://cdn.example.com/images/0e7f6dfeaade4b63ac4e18d25da3b32099c6a19f-1080x1080.jpg"
            },
            {
                "url": "https://cdn.example.com/images/47688945188ac5788e29054b2be1fda95d474ea9-1080x1080.jpg"
            },
            {
                "url": "https://cdn.example.com/images/a31b2ceec33211139918a21a75faaea914f47e39-1080x1080.jpg"
            }
        ],
        "slug": "stella-mccartney",
        "title": "Stella McCartney"
    },
    {
        "gallery": [
            {
                "url": "https://cdn.example.com/images/da8818751ed5f871ac3c48adc7211e30fa7e4e33-4555x5906.jpg"
            },
            {
                "url": "https://cdn.example.com/images/0618ca397c55949629d04127519955796b6f7009-4426x5739.jpg"
            }
        ],
        "slug": "esquire",
        "title": "Esquire"
    },
    {
        "gallery": [
            {
                "url": "https://cdn.example.com/images/60e617f13cfe8314aa2fb1b90973792252011915-3000x1827.jpg"
            },
            {
                "url": "https://cdn.example.com/images/c9c7443cad60078892fe536b8be27080e780e847-2400x3000.jpg"
            }
        ],
        "slug": "matches",
        "title": "Matches"
    },
    {
        "gallery": [
            {
                "url": "https://cdn.example.com/images/3b4be2e581ec8eb542bb4e77e2e7de8858ca3229-5339x3000.jpg"
            }
        ],
        "slug": "testing-project-2",
        "title": "Testing Project 2"
    }
]

const AllThumbnails = [].concat(
        ...galleries.map((gallery) => ({
            image: gallery.gallery,
            slug: gallery.slug,
        }))
    )
    
    console.log(AllThumbnails)

我的理想输出是:

[
    {
        "url": "https://cdn.example.com/images/0e7f6dfeaade4b63ac4e18d25da3b32099c6a19f-1080x1080.jpg",
        "slug": "stella-mccartney"
    },
    {
        "url": "https://cdn.example.com/images/47688945188ac5788e29054b2be1fda95d474ea9-1080x1080.jpg",
        "slug": "stella-mccartney"
    },
    {
        "url": "https://cdn.example.com/images/a31b2ceec33211139918a21a75faaea914f47e39-1080x1080.jpg",
        "slug": "stella-mccartney"
    },
    {
        "url": "https://cdn.example.com/images/da8818751ed5f871ac3c48adc7211e30fa7e4e33-4555x5906.jpg",
        "slug": "esquire"
    },
    {
        "url": "https://cdn.example.com/images/0618ca397c55949629d04127519955796b6f7009-4426x5739.jpg",
        "slug": "esquire"
    },
    {
        "url": "https://cdn.example.com/images/60e617f13cfe8314aa2fb1b90973792252011915-3000x1827.jpg",
        "slug": "matches"
    },
    {
        "url": "https://cdn.example.com/images/c9c7443cad60078892fe536b8be27080e780e847-2400x3000.jpg",
        "slug": "matches"
    },
    {
        "url": "https://cdn.example.com/images/3b4be2e581ec8eb542bb4e77e2e7de8858ca3229-5339x3000.jpg",
        "slug": "testing-project-2",
    }
]

如何正确附加 slug 属性？任何帮助/指针将不胜感激。

Answer 1

你可以使用reduce来做到这一点

const galleries = [{
    "gallery": [{
        "url": "https://cdn.example.com/images/0e7f6dfeaade4b63ac4e18d25da3b32099c6a19f-1080x1080.jpg"
      },
      {
        "url": "https://cdn.example.com/images/47688945188ac5788e29054b2be1fda95d474ea9-1080x1080.jpg"
      },
      {
        "url": "https://cdn.example.com/images/a31b2ceec33211139918a21a75faaea914f47e39-1080x1080.jpg"
      }
    ],
    "slug": "stella-mccartney",
    "title": "Stella McCartney"
  },
  {
    "gallery": [{
        "url": "https://cdn.example.com/images/da8818751ed5f871ac3c48adc7211e30fa7e4e33-4555x5906.jpg"
      },
      {
        "url": "https://cdn.example.com/images/0618ca397c55949629d04127519955796b6f7009-4426x5739.jpg"
      }
    ],
    "slug": "esquire",
    "title": "Esquire"
  },
  {
    "gallery": [{
        "url": "https://cdn.example.com/images/60e617f13cfe8314aa2fb1b90973792252011915-3000x1827.jpg"
      },
      {
        "url": "https://cdn.example.com/images/c9c7443cad60078892fe536b8be27080e780e847-2400x3000.jpg"
      }
    ],
    "slug": "matches",
    "title": "Matches"
  },
  {
    "gallery": [{
      "url": "https://cdn.example.com/images/3b4be2e581ec8eb542bb4e77e2e7de8858ca3229-5339x3000.jpg"
    }],
    "slug": "testing-project-2",
    "title": "Testing Project 2"
  }
]

const flatten = galleries.reduce((acc, curr) => {
  curr.gallery.forEach(g => {
    acc.push({
      url: g.url,
      slug: curr.slug
    });
  });
  return acc;
}, []);

console.log(flatten);