I'm attempting to use a reduce method instead of map on an array of objects. The result produces an object of arrays, and i'm having a lot of trouble returning the proper nuxt routes format.
My first implementation created routes such as
routes () {
return this.$axios.get('https://usewrapper.herokuapp.com/products').then((res) => {
const routes = []
for (const key in res.data) {
routes.push({
route: '/store/' + res.data[key].storeID + '/product/' + res.data[key].productId,
payload: { productData: res.data[key] }
})
}
return routes
})
}
This would effectively return a unique route for every product in the store. But now i'm attempting to return all of the products for a specific storeID, and I decided to use the reduce method to sort those products into the same object.
The code i've written so far is,
const stores = axios.get('https://usewrapper.herokuapp.com/products').then((res => {
return res.data.reduce((stores, item) => ({
...stores,
[item.storeID]: [...(stores[item.storeID] || []), item]
}));
}
))
This creates data like {1: Array(11), 2: Array(5), 3: Array(10)} The 11 items in the array are all individual products, belonging to the indexed store ID. (Image below)
At this point, i'm having trouble replicating the code as shown below, the end goal is for each route '/store/1' payload: array(11)/ all of the products
route 'store/2' payload: array(5) / all of the products
And i'm using the following code to allow my nuxt generate to make several API calls
generate: {
routes: function () {
let posts = axios.get('https://api.com/posts', {params: {size: 10}}).then((res) => {
return res.data.posts.map((post) => {
return {
route: '/feed/' + post.id,
payload: post
}
})
})
let users = axios.get('https://api.com/users', {params: {size: 10}}).then((res) => {
return res.data.content.map((user) => {
return {
route: '/user/' + user.id,
payload: user
}
})
})
return Promise.all([posts, users]).then(values => {
return [...values[0], ...values[1]]
})
}
},
