build a nested array from multiple axios requests on Vuejs

Question

I'm new to Vuejs, I can't figure out how to build a nested array from 2 axios request, I know that there is a better method to achieve the goal... with this code I build 2 separate array, one for productList (with all products of the single shop) and one for shopName (with all shop_urls). I need to use array.map for nested request because I want to build a array of products foreach shop_url

import axios from 'axios';

    export default 
    {
        name: 'Product',

        data: () => ({
            key: 'mySecretKey',
            productsList: [],
            shopName: [],
            errors: [],
        }),

          mounted() {
            axios.get('https://shop.domain.org/api/shop_urls?display=full&output_format=JSON', {                
                auth: {
                    username: this.key
                },
        }) 
        .then(response => response.data.shop_urls.map((val) => {
            this.shopName.push(val.virtual_uri)
            axios.get('https://shop.domain.org/' + val.virtual_uri + '/api/products?display=full&output_format=JSON', {                
                auth: {
                    username: this.key
                },
            })
            .then(response => this.productsList.push(response.data.products))
            .catch(e => this.errors.push(e))

        }))
    }
}

response:

Isnt possible to handle it in server side to prevent send request twice ? response of server side can be array of objects like { 'val' : val, 'products': products } — Mohsen
– Mohsen, Commented May 10, 2020 at 10:32

Riley Pagett · Accepted Answer · 2020-05-10 14:52:50Z

1

Seems to me that you could use

this.$set(this.productsList, val.virtual_uri, response.data.products)

That would create

productsList: [
    "whateverthevirtualuriwas": [
        ...response.data.products
    ]
]

Hard to say without knowing a little more about how the data arrives and how you're using it, but hopefully this is helpful.

responding to question edit Okay, no need to put shopName and productsList into data imo. Just the merged array.

// in your data: mergedArray: [ ]

for (let index in shopName) {
    const uri = shopName[index]
    const products = productList[index]

    this.$set(this.mergedArray, uri, products)
}

edited May 10, 2020 at 14:52

answered May 10, 2020 at 12:56

Riley Pagett

3731 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Riley Pagett Over a year ago

Edited to match.

Pankaspe Over a year ago

thank u mate, with your help I figure out like this: .then(response => this.productsList.push({name: val.virtual_uri, items: response.data.products}))

Collectives™ on Stack Overflow

build a nested array from multiple axios requests on Vuejs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related