Append elements asynchronously

Question

I am trying to create elements based on the query results and put them in the corresponding p containers. The issue is that all the elements end up in the last container and not where they should.

app.Controller.prototype.doReadOnlyDefault = function() {
  var def = $.Deferred();
  app.db.transaction(function(tx) {
    tx.executeSql("SELECT * FROM table", [], function(tx, res) {
      var len = res.rows.length;
      var div = document.createElement("div");
      if (len !== 0) {
        var li = document.createElement("li");
        var lbl = document.createElement("label");
        lbl.textContent = res.rows.item(0).label;
        lbl.id = 'lbl' + res.rows.item(0).id;
        for (var i = 0; i < len; i++) {
          var item = res.rows.item(i);
          var pLu = document.createElement("ul");
          var txt = document.createElement("p");
          //yrdy
          app.checkinController.doDependent(id).done(function(val) {
            if (val) {
              pLu.className = "moc-checkin-field-group moc-checkin-name-group moc-checkin-field-readonly";
              pLu.appendChild(val);
            }
          });
          txt.appendChild(pLu);
          lbl.appendChild(txt);
        }
        li.appendChild(lbl);
        div.appendChild(li);
        def.resolve(div);
      } else {
        def.resolve(false);
      }
    });
  }, function(error) {
    console.log("'doDefault ERROR: '" + error.message);
  }, function() {
    //console.log("'doDefault OK: '");
  });
  return def.promise();
}

Answer 1

You are getting bitten by scoping. You are accessing pLu in your done closure, but that variable is lexical to the outer function, not to the closure. Thus all closures are looking at the same pLu! If you change the var statements in your code with let statements, things should work out.