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"); //
        });