Question

我遇到以下代码的问题：

var data = {};

$('table tr').each(function() {
  var uid = $('td a', $(this)).attr('href').split('=')[1];

  TTDB.transaction(
    function (tx) {
        tx.executeSql("SELECT id FROM players WHERE uid = ?;", [uid], function (txSub, results) {
          data[uid] = results.rows.item(0).id;
        }, TTDBerrorHandler);
    }
  );
});

$('#member tbody tr').each(function() {
  var uid = $('td a', $(this)).attr('href').split('=')[1];

  console.log(uid); // Returns correctly 1643 as shown below
  console.log(data); // Returns whole object correctly
  console.log(data['1643']); // Returns **undefined**
  console.log(data[uid]); // Returns **undefined**
  console.log(uid); // uid is still correctly set to 1643

  /* Following from Safari console
  1643
  Object
    156: 1
    217: 17
    295: 138
    579: 136
    764: 139
    774: 142
    816: 144
    826: 14
    955: 73
    1096: 137
    1133: 13
    1134: 141
    1232: 140
    1321: 11
    1643: 31
    2307: 143
    __proto__: Object
  undefined
  undefined
  1643
  */
});

这是一个可以正常工作的测试集。

var test = {};
test[156] = 1;
test[1643] = 31;

var testUid = 1643;

console.log(test);
console.log(test['1643']); // Returns correctly 31 as shown below
console.log(test[testUid]); // Returns correctly 31 as shown below

/* This is from Safari console
Object
  156: 1
  1643: 31
  __proto__: Object
31
31
*/

由于基本相同的测试集有效，我猜这个问题与本地数据库的异步操作有关，但我无法弄清楚如何解决这个问题......

更新澄清我的问题/我想要实现的目标。

例如，如果我有一个表，我会迭代，然后想要添加一些包含数据库数据的字段。

<table>
  <tr><td class="uid">123<td></tr>
  <tr><td class="uid">234<td></tr>
</table>

然后我想要添加新列：

$('table tr').each(function() {
  var uid = $('td.uid', $(this)).text();

  TTDB.transaction(
    function (tx) {
        tx.executeSql("SELECT id FROM players WHERE uid = ?;", [uid], function (txSub, results) {
          // Problem is that because this transaction is asynchronous $(this) is 
          // not defined when this gets executed.
          $(this).append('<td class="id">' + id + '</td>'); 
        }, TTDBerrorHandler);
    }
  );
});

Answer 1

如果您将日志更改为使用JSON.stringify，您将看到该对象为空。

console.log(uid);
console.log(JSON.stringify(data)); // Returns empty object

使用JSON.stringify强制控制台立即读取整个对象，而不是稍后在控制台中展开对象时。

您应该将您的日志记录代码放在tx.executeSql回调中，以便在响应到来后记录各个项目。

Answer 2

从您的回调中调用代码

$('#member tbody tr').each(function() {...

在executeSql()函数的回调中，并完全摆脱第二个$.each()。

因此，对于每个获取的数据行，您将更新相应的HTML表行。

更新：代码示例。

$('table tr').each(function() {
  var uid = $('td a', $(this)).attr('href').split('=')[1],
  tr$ = $(this);
  TTDB.transaction(
    function (tx) {
        tx.executeSql("SELECT id FROM players WHERE uid = ?;", [uid], function (txSub, results) {
          // access tr$ here...
          // $('td', tr$).each(function() { var td$ = $(this); /* ... */ });
          data[uid] = results.rows.item(0).id;
        }, TTDBerrorHandler);
    }
  );
});

对象属性在console.log中显示为undefined

2 个答案: