I want show_name()
to run and then call another function. I don't understand why show_name().then
fails. I'm probably overlooking something very simple... :)
async function show_name() {
flights_xml.forEach( (flt, i) => {setTimeout(() => {
if (document.getElementById('show_dx_name').checked) {
let serial_from_xml = flt.children[7].innerHTML;
// async function getDxrName633() {
const serialNumber = { serial_from_xml };
const options = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(serialNumber)
};
fetch('/recall633', options)
.then(response => response.json())
.then(json => {
let parser = new DOMParser();
let a633XML = parser.parseFromString(json, "application/xml");
Formats = a633XML.querySelector('Formats');
a633 = Formats.children[1].innerHTML;
a633b4ParsedToXML = $('<textarea />').html(a633).text();
a633 = parser.parseFromString(a633b4ParsedToXML, "text/xml")
console.log(a633)
console.log("Author: " a633.children[0].children[4].children[0].children[0].innerHTML)
})
// }
// getDxrName633().then(()=>{
// console.log("This will work but I don't need it to run every time...it's a waste");
// })
} // END IF ..show
}) // END SetTimeout
}) // END foreach
} // END async show_name
show_name().then(() => {
console.log("Why is this running before the fetch .then ?? ...weird"); //
})
CodePudding user response:
Here is a simplified version which you can apply to you code.
const promArr = flights_xml.map( async (flt, i) => {
const res = await fetch('/recall633', options)
console.log('returning after fetch')
const jsonRes = await res.json()
let parser = new DOMParser();
let a633XML = parser.parseFromString(jsonRes, "application/xml");
Formats = a633XML.querySelector('Formats');
a633 = Formats.children[1].innerHTML;
a633b4ParsedToXML = $('<textarea />').html(a633).text();
a633 = parser.parseFromString(a633b4ParsedToXML, "text/xml")
console.log(a633)
console.log("Author: " a633.children[0].children[4].children[0].children[0].innerHTML)
})
const doneAll = await Promise.all(promArr)
console.log('Fetched all')
CodePudding user response:
Look, I refactor you code...
Basically, I change forEach for a forof... and, I used await... I hope can help you. And I used a Promise response...
async function show_name() {
return new Promise( async (resolve) => {
for (const flt of flights_xml) {
if (document.getElementById('show_dx_name').checked) {
let serial_from_xml = flt.children[7].innerHTML;
// async function getDxrName633() {
const serialNumber = { serial_from_xml };
const options = {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(serialNumber)
};
const response = await fetch('/recall633', options);
const json = response.json();
let parser = new DOMParser();
let a633XML = parser.parseFromString(json, "application/xml");
Formats = a633XML.querySelector('Formats');
a633 = Formats.children[1].innerHTML;
a633b4ParsedToXML = $('<textarea />').html(a633).text();
a633 = parser.parseFromString(a633b4ParsedToXML, "text/xml")
console.log(a633)
console.log("Author: " a633.children[0].children[4].children[0].children[0].innerHTML)
} // END IF ..show
}
resolve('And now?');
});
} // END async show_name
show_name()
.then(() => {
console.log("Why is this running before the fetch .then ?? ...weird"); //
});