Json: parse to display in HTML using JQuery
I'm trying to parse data from a page of JSON in my ASP.NET MVC 1.0 web application. I need this data to display in a table on page load and I'm having a great deal of trouble mainly because I've never used JSON before. The JQuery site gives pretty terrible examples as well. This is what I have so far, I need help writing a function:
$("document").ready(function() {
$.getJSON("http://localhost:1909/encoders",
function(data) {
$.each(data.items, function() {
});
});
});
The URL above is currently just displaying JSON and the two columns I am getting from the SQL server to produce the JSON are EncoderName and EncoderStatus. The id is dis开发者_如何学运维playencoders.
Thanks!
edit: my controller looks like this:
[UrlRoute(Name = "GetEncoders", Path = "encoders")]
public ActionResult GetEncoders() {
var encoders = Database.GetEncoders();
return Json(encoders);
}
when compiled my /encoders/ looks like:
{
* EncoderName: "rmcp2-encoder"
* EncoderStatus: "inactive"
}
$("document").ready(function() {
$.getJSON("http://localhost:1909/encoders", function(data) {
$("#div-my-table").text("<table>");
$.each(data, function(i, item) {
$("#div-my-table").append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>");
});
$("#div-my-table").append("</table>");
});
});
funnily enough, i use an almost similar methodology but instead of parsing the json, i actually apply the html formatting to the json structure from a helper method in my controller. so basically, my controller passes back a json result fully formatted and all the jquery function has to do is place it inside the relevant div which in this case is $('#propertyList').html(data).
here's kinda how it looks on the view:
<script type='text/javascript'>
function GetLocationHighlites() {
$.ajaxSetup({ cache: false });
$.getJSON('/en/Property/GetLocationHighlites/', null,
function(data) { JsonData(data); });
}
function JsonData(data) {
if (data.length != 0) {
$('#propertyList').html(data);
$('#propertyList').slideDown('fast');
return false;
}
};
$(document).ready(function() {
GetLocationHighlites();
});
</script>
and in the controller:
public JsonResult GetLocationHighlites()
{
IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury);
string htmlBlock = string.Format(_block, block.Header, block.Content);
return Json(htmlBlock);
}
_block in the above JsonResult GetLocationHighlites() is a string constant along the lines of:
private string _block = @"<div class='Block'>
<div class='header'>
{0}
</div>
<div class='BlockContent-body'>
{1}
</div>
</div>";
my take on the subject, and in this case, my (feeble :)) attempt to keep it DRY.
of course, you could ALSO/ALTERNATIVELY return a string (rather than a Json result). I actually got to thinking with the answer above and realised that this was perhaps the 'best case' for my purposes. so i now have (in view):
$.get('/en/Property/GetLocationHighlites/'
rather than:
$.getJSON('/en/Property/GetLocationHighlites/'
and have amended the controller function to:
public string GetLocationHighlites()
{
IBlockData block = WebPagesMapper.GetLocationHighlites(propertiesWorldwideLuxury);
string htmlBlock = string.Format(_block, block.Header, block.Content);
return htmlBlock;
}
hope this doesn't muddy the waters...
精彩评论