I'm sure this is an issue with my understanding/implementation. The issue is that I'm trying to return the ID of the created object into an array so that array can later be inserted into another object. Moving the .then() between the function, the call, nothing seems to work. Pushing to the array, assigning the value to the array via index doesn't seem to work. Any insights/guidance into what the root issue is and a path to resolve it is appreciated.
const contacts = document.getElementsByName('newContact');
const contactName = document.getElementsByName('contactName');
const contactTitle = document.getElementsByName('contactTitle');
const contactPhone = document.getElementsByName('contactPhone');
const contactEmail = document.getElementsByName('contactEmail');
let contactIDArray = new Array();
for (let i = 0; i < contacts.length; i++) {
const name = contactName[i].value;
const title = contactTitle[i].value;
const phone = contactPhone[i].value;
const email = contactEmail[i].value;
var id;
createContact(name, title, phone, email).then(function (res) {
id = res.data.id;
alert(res.data.id);
return id;
});
alert(id);
import axios from 'axios';
export const createContact = async (contactName, contactTitle, contactPhone, contactEmail) => {
try {
const res = await axios({
method: 'POST',
url: '/api/v1/contacts',
data: {
contactName,
contactTitle,
contactPhone,
contactEmail,
},
});
return res.data.id;
} catch (err) {
console.log(err);
}
};
There are multiple problems I can see:
.data.id on a value that is already an idPromise util (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all might be what you are looking for).For instance I would go with something along those lines (not tested):
const contacts = document.getElementsByName('newContact');
const contactName = document.getElementsByName('contactName');
const contactTitle = document.getElementsByName('contactTitle');
const contactPhone = document.getElementsByName('contactPhone');
const contactEmail = document.getElementsByName('contactEmail');
let contactIDArray = new Array();
const requests = []
for (let i = 0; i < contacts.length; i++) {
const name = contactName[i].value;
const title = contactTitle[i].value;
const phone = contactPhone[i].value;
const email = contactEmail[i].value;
var id;
promise = createContact(name, title, phone, email).then(function (res) {
const id = res.data.id;
alert(res.data.id);
return id;
});
requests.push(promise)
}
Promise.all(requests).then(ids => {
// This should contain the array of ids
alert(ids)
})
Edit: Also, be careful about sharing result between synchronous and asynchronous calls, usually you would stay in the async world once you started your async tasks, as stated here: How to return data from promise
I'm trying to return the ID of the created object into an array so that array can later be inserted into another object
Based on your request, I have a few things for you:
.then()) inside a loop unless you really need it.Please see the modified code below:
let contactPromises = [];
for (let i = 0; i < contacts.length; i++) {
const name = contactName[i].value;
const title = contactTitle[i].value;
const phone = contactPhone[i].value;
const email = contactEmail[i].value;
contactPromises.push(createContact(name, title, phone, email));
}
let contacts = (contactPromises.length > 0) ? await Promise.all(contactPromises) : [];
let contactIds = contacts.map(contact => contact.id);
// use your contactIds here
let res = await axios({
method: 'POST',
url: '/api/v1/contacts',
data: {
contactName,
contactTitle,
contactPhone,
contactEmail,
},
});
return res.data; // <--- return res.data only, not the res.data.id