Flatten arrays within object of arrays with data from parent object

Question

I want to flatten some arrays nested in each object of an array of objects to return an array of objects with data from the parent objects. Quite a mouthful but perhaps some example json will help explain.

My current data and code is:

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)

My ideal output is:

[
    {
        "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",
    }
]

How can I append the slug property correctly? Any help/pointers would be much appreciated.

Kirill Simonov · Accepted Answer · 2020-05-13 21:16:01Z

You could use

const allThumbnails = galleries.map(parent => 
    parent.gallery.map(g => ({url: g.url, slug: parent.slug}))).flat();

.map() will map each parent object to an array of {url, slug}, and then .flat() will flatten these nested arrays.

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 = galleries.map(parent => parent.gallery.map(g => ({url: g.url, slug: parent.slug}))).flat();
    
console.log(allThumbnails);

D. Seah · Accepted Answer · 2020-05-13 21:06:20Z

you can use reduce to do this

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

First time I see the reduce function being used to create an array with the same amount of elements, nice one dude!

Dennishofken · Accepted Answer · 2020-05-13 21:21:24Z

0

Looks like I'm a little late with my answer, I think Kirill's solution is going to be the most practical one. Here is my solution anyways:

let newArray = []
galleries.forEach(function (gallery) {
    gallery["gallery"].forEach(function (url) {
         newArray.push({"url": url["url"], "slug": gallery["slug"]})
     })
})

answered May 13, 2020 at 21:21

Dennishofken

3172 silver badges9 bronze badges

Comments

syedmh · Accepted Answer · 2020-05-13 21:29:51Z

0

Some of these answers are very close to mine, but here's mine using forEach with ES6 syntax, which in my opinion is more readable:

const allThumbnails = new Array();

thumbnails.forEach(set => {
    set.galleries.forEach(item => {
        allThumbnails.push({url: item.url, slug: set.slug};
    });
});

answered May 13, 2020 at 21:29

syedmh

5492 silver badges15 bronze badges

Collectives™ on Stack Overflow

Flatten arrays within object of arrays with data from parent object

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related