首页 文章

在json字符串中显示所有对象

提问于
浏览 次
0

我试图通过 $.getJSON 获取json字符串中的所有对象，但它可以工作，但我无法显示它们（它只显示最后一个对象） . 我知道它，因为它通过 .$each 覆盖每个条目，但我不知道如何解决这个问题，因为我试图追加它但是只是多次显示每个条目（我将它设置为每5秒更新一次，看是否有更多的条目可用） . 无论如何，这里是我的代码（jQuery和PHP）

jQuery代码 -

$(function() {
    function buildOnlineFriendList() {
        $.getJSON("/members/friends/get-friends-online")
        .done(function(msg) {
            if (jQuery.isEmptyObject(msg)) {
                $('#friends-online').html("No friends are online.");
            } else {
                $.each(msg, function(key, value) {
                    // how to display each friend online without overwriting each one to only display the last. :/
                    $('#friends-online').html("<a href=\"/members/chat/" + value.id + "\" class=\"chat-with\">" + value.name + "</a><br>");
                });
            }
        }).fail(function(msg) {
            $('#friends-online').html(msg.message);
        });
    }

    setInterval(function() {
         buildOnlineFriendList();
    }, 5000);

    buildOnlineFriendList();
});

PHP代码 -

public function getFriendsOnline()
{
    $query = $this->connection->execute("SELECT members.username AS friend_username, friends_online.user_id AS fo_id FROM friends_online, friends, members
        WHERE friends_online.user_id = friends.friend_id AND members.id = friends.friend_id AND friends.user_id = " . $this->getUserId()['id']);

    if ($query->count() > 0) {
        // get the id/username of the friend(s) online
        foreach ($query as $values) {
            $friends_online[] = array('id' => $values['fo_id'], 'name' => $values['friend_username']);
        }

        return $friends_online;
    } else {
        throw new FriendsException("No friends are online.");
    }
}

任何帮助，将不胜感激 .

谢谢！

（如果我的问题不清楚，我可以尝试提供更多信息）

php jquery

4 回答

  • 1

    您已经知道在使用 $.each 进行写入时会覆盖这些值 . 问题是它为每个循环编写 friends-online 元素的HTML . 您需要做的就是在变量中设置此值并在每次迭代中更新变量 . 然后在完成循环后，为元素设置HTML . 我已将您的功能修改为：

    function buildOnlineFriendList() {
    $.getJSON("/members/friends/get-friends-online")
    .done(function(msg) {
        // create a variable to hold the html string
        var html = "";
        if (jQuery.isEmptyObject(msg)) {
            $('#friends-online').html("No friends are online.");
        } else {
            $.each(msg, function(key, value) {
                // set the value of the html here
                html += "<a href=\"/members/chat/" + value.id + "\" class=\"chat-with\">" + value.name + "</a><br>";
            });
            // set the html here, after the loop.
            $('#friends-online').html(html);                 
        }                       
    }).fail(function(msg) {
        $('#friends-online').html(msg.message);
    });
}
    回复于
  • 0

    尝试替换这个：

    $('#friends-online').html("<a href=\"/members/chat/" + value.id + "\" class=\"chat-with\">" + value.name + "</a><br>");

    有了这个：

    $('#friends-online').append("<a href=\"/members/chat/" + value.id + "\" class=\"chat-with\">" + value.name + "</a><br>");

    .html（）方法将覆盖所选元素中的所有现有HTML . .append（）方法将内容添加到现有HTML的末尾

    回复于
  • 0
    $("#friends-online")
  .append(
      $("<a>")
        .attr("href", "/members/chat/" + value.id)
        .attr("class", "chat-with")
  )
  .append($("<br>"));
    回复于
  • 1

    尝试用 $('#friends-online').append(... 替换 $('#friends-online').html(... . 目前，这一行重复了＃friends-online的HTML，而使用append会将每个新用户添加到元素中 .

    您还需要添加 $('#friends-online').empty() 作为计时器的第一行，即

    setInterval(function() {
     $('#friends-online').empty();
     buildOnlineFriendList();
}, 5000);

    或者在功能本身，即

    function buildOnlineFriendList() {
    $('#friends-online').empty();
    $.getJSON("/members/friends/get-friends-online") ...
    回复于

相关问题