Question

我正在面对这个令人讨厌的问题，即将正确的值链接到我正在呈现的HTML列表中的右行，我认为解释我的代码将是最好的解释方式，所以我去了。

我有一个json字符串，可以从数据库中返回有关多个玩家的数据。玩家可能有多个参赛作品。

我的字符串格式为

jsonVar = {"someStr":[{"Fbid":"xxxxxxxxx","score":"xxxxxx","game":"x","date":"1300689902"}, .... }]

现在我想将数据显示为所有列的HTML列表。

createList = function()
{
arrayLength = jsonVar.someStr.length;
for(i=0;i<arrayLength;i++)
{
    listName = document.id('name');
    listScore = document.id('score');
    listGameMode = document.id('gamemode');
    listTime = document.id('time');                             
    listfbID= document.id('fbID');

    fbId = jsonVar.someStr[i].Fbid;

    FB.api('/'+fbId+'/', function(response) 
    {   
         new Element('li',{text: response.first_name +" "+response.middle_name+" "+response.last_name }).inject(listName, 'bottom');        
    });
    new Element('li',{text:jsonVar.someStr[i].Fbid}).inject(listfbID, 'bottom');
    new Element('li',{text: jsonVar.someStr[i].score}).inject(listScore, 'bottom');
    new Element('li',{text:jsonVar.someStr[i].gamemode}).inject(listGameMode, 'bottom');
    new Element('li',{text: jsonVar.someStr[i].date}).inject(listTime, 'bottom');

    }
}

问题是名称没有与列表中的其他条目一起正确返回，我假设这是因为从fb返回名称有些延迟。

Answer 1

你的意思是UNIX时间？也许你可以使用这样的东西？

var newDate = new Date();
newDate.setTime(unix*1000);
dateString = newDate.toUTCString();

unix是你的时间。

Answer 2

您应该创建一个闭包，以便将当前变量传递给api调用的回调。

FB.api('/'+fbId+'/', ( function() {
    var current_i = i;
    return function(response) 
       {   
         new Element('li',{text: response.first_name +" "+response.middle_name+" "+response.last_name }).inject(listName, 'bottom');        
         new Element('li',{text:jsonVar.someStr[current_i].Fbid}).inject(listfbID, 'bottom');
         new Element('li',{text: jsonVar.someStr[current_i].score}).inject(listScore, 'bottom');
         new Element('li',{text:jsonVar.someStr[current_i].gamemode}).inject(listGameMode, 'bottom');
         new Element('li',{text: jsonVar.someStr[current_i].date}).inject(listTime, 'bottom');
       };
    })() );

在http://jsfiddle.net/gaby/zZ74b/

处使用闭包和ajax回调的通用示例

Answer 3

试试这个..

FB.api('/'+fbId+'/', function(response)
{       
    new Element('li',{text: response.first_name +" "+response.middle_name+" "+response.last_name }).inject(listName, 'bottom');
    new Element('li',{text:jsonVar.someStr[j].Fbid}).inject(listfbID, 'bottom');     
    new Element('li',{text: jsonVar.someStr[j].score}).inject(listScore, 'bottom');     
    new Element('li',{text:jsonVar.someStr[j].gamemode}).inject(listGameMode, 'bottom');     
    new Element('li',{text: jsonVar.someStr[j].date}).inject(listTime, 'bottom');   
    j++;          
});

但是，只有当您确定fb API将按照您要求的顺序返回数据时。

Answer 4

我认为问题出现是因为FB.api（）向Facebook发出异步XMLHttpRequest。您提供的回调函数将在稍后执行，而'for'循环将继续运行。

你不能让FB.api（）同步运行，你也不应该这样做，因为它会极大地减慢你的列表构建速度，并且会对Facebook提出很多请求。

恕我直言，可接受的解决方案是将您的第一，中间和姓氏字段存储在您自己的数据库中，并使用PHP将其传递给视图。

Answer 5

由于缺乏更好的解决方案，这就是我要解决的问题。我将其锁定到另一列上的唯一ID，并通过标识该行来插入名称。这个解决方案对我有用，因为我的行数很小。如果要在更大范围内实现逻辑，可能需要重新考虑逻辑。

createList = function() {
arrayLength = jsonVar.someStr.length;
for (i = 0; i < arrayLength; i++) {
    listName = document.id('name');
    listScore = document.id('score');
    listGameMode = document.id('gamemode');
    listTime = document.id('time');
    listfbID = document.id('fbID');

    fbId = jsonVar.someStr[i].Fbid;

    new Element('li', {
        text: jsonVar.someStr[i].Fbid
    }).inject(listfbID, 'bottom');
    new Element('li', {
        text: jsonVar.someStr[i].score
    }).inject(listScore, 'bottom');
    new Element('li', {
        text: jsonVar.someStr[i].gamemode
    }).inject(listGameMode, 'bottom');
    new Element('li', {
        text: jsonVar.someStr[i].date
    }).inject(listTime, 'bottom');
    new Element('li', {
        text: "loading"
    }).inject(listName, 'bottom');

    FB.api('/' + fbId + '/', function(response) {
        var connect;
        parent_id = $('fbID');
        child_id = parent_id.getElementsByTagName('li');

        for (j = 0; j < child_id.length; j++) {
            if (response.id == child_id[j].innerHTML) {
                parent_name = $('name');
                child_name = parent_name.getElementsByTagName('li');
                child_name[j].innerHTML = response.first_name + " " + response.middle_name + " " + response.last_name;
            }
        }
    });

}

}

使用回调函数创建HTML列表（li）的问题

5 个答案: