jQuery $.each() update div using webservice

jQuery $.each() update div using webservice

I have the following webservice working:
[WebMethod]
[ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
public List<ServerRoomDisplay> GetData(List<string> urls)
{
List<ServerRoomDisplay> returnList = new List<ServerRoomDisplay>();
foreach (var uri in urls)
{
XDocument xdoc = XDocument.Load(uri);
IEnumerable<XElement> serv = xdoc.Elements();
string ur = "";
string room = "";
string temp = "";
string hum = "";
string dew = "";
foreach (var ser in serv)
{
room = ser.Attribute("host").Value;
ur = "http://" + ser.Attribute("address");
temp =
ser.Descendants("devices").Descendants("device").Descendants("field").Where(x
=> (string)x.Attribute("key").Value ==
"Temp").FirstOrDefault().Attribute("value").Value.ToString();
hum =
ser.Descendants("devices").Descendants("device").Descendants("field").Where(x
=> (string)x.Attribute("key").Value ==
"Humidity").FirstOrDefault().Attribute("value").Value.ToString();
dew =
ser.Descendants("devices").Descendants("device").Descendants("field").Where(x
=> (string)x.Attribute("key").Value ==
"Dewpt").FirstOrDefault().Attribute("value").Value.ToString();
returnList.Add(new ServerRoomDisplay
{
RoomName = room,
Url = ur,
Temperature = temp,
Humidity = hum,
DewPoint = dew,
});
}
}
return returnList;
}
I then pass the parameters via an ajax call. Please note that this method
runs RECURSIVELY as to update the data within the div... like a stock
ticker on eTrade or something.
(function poll() {
var pageUrl = '<%=ResolveUrl("~/Reporting/GetXMLData.asmx")%>'
var urls = ["http://aaa/data.xml", "http://bbb/data.xml",
"http://ccc/data.xml"];
var jsonText = JSON.stringify({ urls: urls });
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: pageUrl + "/GetData",
data: jsonText,
success: function (msg) {
var res = msg.d;
$.each(res, function (i, item) {
$('#<%=lblOutput.ClientID%>').html(res[i].RoomName);
});
},
dataType: "json",
complete: poll,
timeout: 3000
});
})();
which then produces this response:
[{"__type":"ServerRoomDisplay",
"Url":"http://address=\"aaa\"",
"RoomName":"aaa MDF Room 500",
"Temperature":"74.99",
"Humidity":"38",
"DewPoint":"47.65",
"AlarmOne":null,
"AlarmTwo":null,
"AlarmThree":null,
"AlarmFour":null
},
{"__type":"ServerRoomDisplay",
"Url":"http://address=\"bbb\"",
"RoomName":"bbb Room 298",
"Temperature":"77.73",
"Humidity":"39",
"DewPoint":"50.79",
"AlarmOne":null,
"AlarmTwo":null,
"AlarmThree":null,
"AlarmFour":null
},
{"__type":"ServerRoomDisplay",
"Url":"http://address=\"ccc\"",
"RoomName":"ccc Room 601",
"Temperature":"75.32",
"Humidity":"49",
"DewPoint":"54.83",
"AlarmOne":null,
"AlarmTwo":null,
"AlarmThree":null,
"AlarmFour":null
}];
As you can see, it is 3 full objects returned in the json response. I then
have output div to place the data
<div>
<asp:Label ID="lblOutput" runat="server" />
</div>
from the jquery above, i'm testing by trying to list only the "RoomName"
into the div. When I do so, it only ever prints out the LAST item, which
is "ccc Room 601" and that's the only thing in the div.
Can someone please help me to be able to list all of the objects and then
only update the data that changes? basically it should re-write the
lblOutput again and change only the temperature, humidity and dewpoint
info. But it should print out all 3 of the objects. In other words, I
should get the following (for RoomName only right now)
aaa MDF Room 500
bbb Room 298
ccc Room 601
I hope I've explained this well enough. Thank you in advance.