I've got 2 functions returning promises that I would like to chain within a foreach loop. What's happening is that the first function is executed until the foreach is done before doing the second function for the array.
What I would expect is that for each link, getLandingPageName is executed then pass the new value coming from it to a form that I pass to createLandingPage.
$('#btn_multi_lp').on('click', () => {
let links = (findLpURL(HTML)) ? findLpURL(HTML) : getHrefLink(HTML);
if (links) {
let linksByNbr = countOccurrences(links);
Object.keys(linksByNbr).forEach((link) => {
let formLp = new FormData();
formLp.append('campaign_id', $('#campaign_id').val())
formLp.append('crea_id', 80);
getLandingPageName($campaignName).then((dataLp) => {
formLp.append('lp_name', dataLp.name);
formLp.append('validated_lp', link);
createLandingPage(formLp).then(() => {
formLp.delete('validated_lp');
formLp.delete('lp_name');
}).catch((err) => {
alert(err);
})
}).catch((error) => {
console.log(error);
})
});
}
});
function getLandingPageName(campaignName) {
return new Promise((resolve, reject) => {
$.ajax({
type: 'POST',
url: "{{ route('account-creative-getlandingpagename') }}",
data: {
campaignName: campaignName,
_method: 'POST' //we need this so we can send string data to server
},
dataType: "json",
success: (data) => {
resolve(data);
},
error: (jqXHR, textStatus, error) => {
reject('\nstatus code ' + jqXHR.status + '\n details: ' + jqXHR.responseText);
}
});
});
function createLandingPage(formData) {
return new Promise((resolve, reject) => {
$.ajax({
type: 'POST',
url: "{{ route('account-lp-create') }}",
data: formData,
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: (data) => {
/* data {success, response_lp, lp_paired_name } */
resolve(data);
},
error: (jqXHR, textStatus, error) => {
reject('creativeInstall : \nstatus code ' + jqXHR.status + ' \ndetails: ' + jqXHR.responseText);
}
});
});
}