Sending data in array of objects to server - ajax

Question

I am developing an app that when I don't have internet connection it must send to localStogare, later I could send the data to server when it is online, I will do this manually.
Once I get the data with JS from localStorage store it in a variable
let encuestas = [];
if ( localStorage.getItem('encuestas') ) {
encuestas = JSON.parse(localStorage.getItem('encuestas'))
}
after that, I have an array like this one:
encuestas = [
{
"code": "2124",
"sells": 2124,
"latitude": "14.8550091",
"longitude": "-90.0685453",
"visit_date": "2019-04-02",
"visit_time": "21:23:54",
"user": 1,
"answers": [
{
"question": 4,
"answer": "Si"
},
{
"question": 1,
"answer": "No"
}
]
},
{
"code": "2140",
"sells": 2140,
"latitude": "14.8550156",
"longitude": "-90.0685451",
"visit_date": "2019-04-02",
"visit_time": "21:40:13",
"user": 2,
"answers": [
{
"question": 4,
"answer": "No"
},
{
"question": 1,
"answer": "No"
}
]
},
{
"code": "2146",
"sells": 2146,
"latitude": "14.855016",
"longitude": "-90.0685448",
"visit_date": "2019-04-02",
"visit_time": "21:46:17",
"user": 2,
"answers": [
{
"question": 4,
"answer": "No"
},
{
"question": 1,
"answer": "No"
}
]
}
]
now I need to send the data with a loop to server, I have done this functions but I can't send the data, I don't receive any error message
This must receive the data index I need to send
const sendDataToServer = encuesta => {
axios({
method: 'post',
headers: {
'Authorization': `Token ${sessionStorage.getItem("token")}`
},
url: `${baseURL}customers/`,
contentType: 'application/json',
data: encuesta
})
.then(res => {
encuestas.shift()
})
.catch(e => {
console.log(e)
})
}
This must send each one to server and later, delEcuestas, must set the array as an empty array
const enviarDatos = () => {
for ( const i in encuestas ) {
sendDataToServer(encuestas[i])
}
delEncuestas();
}
I hope you can help me, thanks!!

Answer 1

I'm not immediately seeing why there aren't requests made when this code executes. That said we can probably get this working with some more readable and idiomatic code.
Modifying an array with shift(), that's part of the looping condition, inside the loop construct is generally discouraged (if not an actual bug). So it's worth refactoring this code anyway.
Now, assuming your backend can handle the requests in any sequence, then using the axios.all() function to make the requests asynchronous is probably advisable.
Something like this:
const enviarDatos = () => {
let axiosPromises = enquestas.map(enquesta => {
return axios({
method: 'post',
headers: {
'Authorization': `Token ${sessionStorage.getItem("token")}`
},
url: `${baseURL}customers/`,
contentType: 'application/json',
data: encuesta
});
});
axios.all(axiosPromises).then(results => {
// All promises are resolved/rejected
// E.g. results = [promiseResolution1, promiseResolution2, etc.]
delEncuestas();
}
).error((err) => {});
}