SignalR send list of objects from Hub class to the client

Question

I've seen a topic with the exact same issue and I've followed the answer there, but still cannot make this work, hope you can tell me what I'm doing wrong. I'm trying to send a list of objects(usenames) from the Hub to the client, but the output I get is [object Object]. Here is my class with just 1 property in it:

public class WaitingUser
{
    public string waitingUsrName{ get; set; }
}

In my hub class I'm creating the list, I've tried to change the static modifier to public, but same result:

static List<WaitingUser> WaitingUseresList = new List<WaitingUser>();

I have a method with try/catch statement, where I put some dummy data in the catch for the test. Already debugged it, the catch is properly called and my objects are in the list:

            catch
            {
               // WaitingUseresList.Add(new WaitingUser { waitingUsrName = userName });
                WaitingUseresList.Add(new WaitingUser { waitingUsrName = "John" });
                WaitingUseresList.Add(new WaitingUser { waitingUsrName = "Mike" });
                WaitingUseresList.Add(new WaitingUser { waitingUsrName = "Steven" });
                Clients.All.UpdateWaitingUsrList(WaitingUseresList);
            }

And on my client side I have:

   objHub.client.UpdateWaitingUsrList = function (WaitingUseresList) {
       $('.WaitingUsrs').val('');
       var list = WaitingUseresList;
       for (var i = 0; i < list.length; i++) {
           $('.waitingUsrs').append('<li>' + list[i] + '</li>');
       }               
       var height = $('.waitingUsrs')[0].scrollHeight;
       $('.waitingUsrs').scrollTop(height);
   }

The output is:

• [object Object]
• [object Object]
• [object Object]

I've followed the other topic to make it work, but still cannot figure it out. So I've changed my catch statement like this:

    catch
    {
       // WaitingUseresList.Add(new WaitingUser { waitingUsrName = userName });
        WaitingUseresList.Add(new WaitingUser { waitingUsrName = "John" });
        WaitingUseresList.Add(new WaitingUser { waitingUsrName = "Mike" });
        WaitingUseresList.Add(new WaitingUser { waitingUsrName = "Steven" });
        string list = Newtonsoft.Json.JsonConvert.SerializeObject(WaitingUseresList);
        Clients.All.UpdateWaitingUsrList(list);
        Clients.Caller.NoExistAdmin();
    }

and my client side:

   objHub.client.UpdateWaitingUsrList = function (list) {
       $('.WaitingUsrs').val('');
       var waitingList = list;
       for (var i = 0; i < waitingList.length; i++) {
           $('.waitingUsrs').append('<li>' + list[i] + '</li>');
       }               
       var height = $('.waitingUsrs')[0].scrollHeight;
       $('.waitingUsrs').scrollTop(height);
   }

The output becomes this. Better, but still not what I've expected. What am I doing wrong? Thanks in advance!

Answer 1

Your first attempt was good. And you've got not signalr issue. It's javascript issue.

Just need to change this

$('.waitingUsrs').append('<li>' + list[i] + '</li>');

to this:

$('.waitingUsrs').append('<li>' + list[i].waitingUsrName + '</li>');

Your second attempt is quite crazy. You send string to UpdateWaitingUsrList and then iterate on it. So of course you've got such crazy result with list filled with json string characters.