How to map object to Array in ES6?

Question

I have an array of objects called 'urls' containing object each having 'name' and 'url' property. I want to map each object to an array. How can I achieve this ?

let urls = [{
        "name": "regions",
        "url": context + "ip/region/getAllRegions.do?query="
    },
    {
        "name": "sub regions",
        "url": "context + 'ip/region/getAllSubRegions.do"
    },
];
this.axiosData = urls.map(t => {
    axios.get(t.url)
        .then(res => {

            if (res.data.responseCode == 1) {
                return res.data.payload;
            } else {

                toastr.error("error retrieving " + t.name, "Failure");
            }
        })
        .catch(err => {
            console.log(err);
        });
});

Here res.data.payload will be an array of object, axiosData is defined in data inside the property of Vue instance. I want 'axiosData' which is an array to be an array of array of objects.

The axiosData might be like this:

[[{
"id": 8,
"name_en": "Rangpur",
}, {
"id": 9,
"name_en": "Sylhet",
}, {
"id": 10,
"name_en": "Mymensingh",
}],


[{
"another_id": 8,

}, {
"another_id": 9,

}, {
"another_id": 10,

}]]

Kind of unclear... what's an example of your desired data structure? — robinsax
– robinsax, Commented Dec 12, 2018 at 6:18
@robinsax axiosData might be like this [ [ obj1, obj2, obj3....], [another_obj1, another_obj2, another_obj3, ....], ..... ] — run_time_error
– run_time_error, Commented Dec 12, 2018 at 6:22
why not use push if you just want to push the array url objects to axiosData — Aayush Sharma
– Aayush Sharma, Commented Dec 12, 2018 at 6:26

longroad · Accepted Answer · 2018-12-12 06:35:13Z

2

You should use Promise.all function in order to make multiple requests.

let urls = [{
        "name": "regions",
        "url": context + "ip/region/getAllRegions.do?query="
    },
    {
        "name": "sub regions",
        "url": "context + 'ip/region/getAllSubRegions.do"
    },
];
this.axiosDataPromises = urls.map(t => {
    return axios.get(t.url)
        .then(res => {

            if (res.data.responseCode == 1) {
                return res.data.payload;
            } else {

                toastr.error("error retrieving " + t.name, "Failure");
            }
        })
        .catch(err => {
            console.log(err);
        });
});

Promise.all(this.axiosDataPromises).then(resultArr => {
  this.axiosData = resultArr;
})

edited Dec 12, 2018 at 6:35

answered Dec 12, 2018 at 6:27

longroad

4054 silver badges13 bronze badges

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

1 Comment

run_time_error Over a year ago

works like a charm, but I could not understand why this works. looks like I have to revisit pormise. thanks btw

Collectives™ on Stack Overflow

How to map object to Array in ES6?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related