Json: parse to display in HTML using JQuery
Solution 1
$("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>");
});
});
Solution 2
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.
Solution 3
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...
user177215
Updated on June 04, 2022Comments
-
user177215 almost 2 years
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 displayencoders.
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" }