3

I'm trying to do this with async/await, but any solution is good. Anyone know how I could change this:

series[group].forEach(async (ele, j) => {
    await $.ajax({
        url: `templates/ele${ele}.template.html`,
        success: function (data) {
          const $copyEl = $(el).clone()
          const r = new RegExp('\\{\\{\\s*' + item + '\\s*\\}\\}', 'g')
          const html = $copyEl.html().replace(r, data)

          $(html).insertBefore(parent)
        },
        error: function (e) {
          console.error(e)
        }           
      }).then(() => {
        $(parent).detach()
        if(i + 1 === outer_last && j + 1=== inner_last)
          template_callback()
      })
  })
})

to not run the .detach() until after the last .insertBefore() completes?

Felix Kling
  • 795,719
  • 175
  • 1,089
  • 1,143
roberto tomás
  • 4,435
  • 5
  • 42
  • 71
  • 1
    `forEach` is synchronous. It doesn't know about async functions. Also, mixing `await` and promises is strange. – Felix Kling Feb 10 '17 at 19:27
  • hmm, I thought that you _can_ do `foo.forEach(async...)` (to block on each interation) but not `async foo.forEach(...)` (to block on the whole `forEach` loop).. in any case, my concern here is for the ajax callback – roberto tomás Feb 10 '17 at 19:35

1 Answers1

2

Map each of the elements in your array to Promises, and then rely on Promise.all:

const promises = series[group].map((ele) => (
    $.ajax({
        url: `templates/ele${ele}.template.html`,
    }).then((data) => {
        const $copyEl = $(el).clone()
        const r = new RegExp('\\{\\{\\s*' + item + '\\s*\\}\\}', 'g')
        const html = $copyEl.html().replace(r, data)

        $(html).insertBefore(parent)
    }, (e) => {
        console.error(e)
    })
))

Promise.all(promises).then(() => {
  $(parent).detach()
})
Kevin Ji
  • 10,479
  • 4
  • 40
  • 63
  • Wait, is `Promise.all` doing anything for me? I need to wait until `insertBefore` completes, not the outer ajax call. – roberto tomás Feb 10 '17 at 19:49
  • Sorry, let me fix up my code. I didn't realize you had a `success` method. – Kevin Ji Feb 10 '17 at 20:00
  • @robertotomás Try the changes now. – Kevin Ji Feb 10 '17 at 20:04
  • umm, curly braces `series[group].map((ele) => {` not parens! and, it still does not work (I get no rendered templates at all that way, whereas I get most of them but occassionally not one .. usually the first or last in a series – roberto tomás Feb 10 '17 at 20:12
  • 1
    Oh the parens are intended, as the function will automatically return that value without the return keyword. It's nice for single statement lambdas. – Kevin Ji Feb 10 '17 at 20:15
  • Also, do you mind giving the HTML that is currently on the page and what is generated? It seems like you're referring to variables that don't exist in your code. – Kevin Ji Feb 10 '17 at 20:22
  • those lambdas got it for me, good job. :) restored mark as answer. the code is (not yet in latest form now) at https://github.com/robbiemu/cmst301-project2 - look at the scripts/presentation.js -- presentation for class. You can look at the current version here: https://cmst301-project2.herokuapp.com – roberto tomás Feb 10 '17 at 20:27