Question

If I have a list of objects

IEnumerable<MyType> myTypes;

Is it possible for me to return this to the client as JSON

return Json(myTypes);

and if so, is it possible for me to convert this (now JSON format) list to a <table> when it gets to the client?

Is there any jQuery plugin to do this?

The thing is, there’s loads of other stuff I need to send as JSON also, so generating a table with a PartialView and embedding that into the JSON is a extra complexity that I’d like to avoid.

Answer 1

I came up with my own solution for a similar problem, I wanted to be able to display any JSON object array response into a nice table without having to hard code anything in the JavaScript so it was reusable!

Here is what I did…

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "POST",
            url: "DemoSvc.asmx/GetJSONTableContents",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: "{}",
            success: function(res) {
                $('#<%= DynamicGridLoading.ClientID %>').hide();
                $('#<%= DynamicGrid.ClientID %>').append(CreateDynamicTable(res.d)).fadeIn();
            }
        });
    });
</script>

This is doing the pulling of data from the web service to the page, the important part of this code is the call to the "CreateDynamicTable()" that converts the JSON object array to a pretty HTML table. Below is the code, the output is a pretty table of HTML.

function CreateDynamicTable(objArray) {
  var array = JSON.parse(objArray);

  var str = '<table class="lightPro">';
  str += '<tr>';
  for (var index in array[0]) {
    str += '<th scope="col">' + index + '</th>';
  }
  str += '</tr>';
  str += '<tbody>';
  for (var i = 0; i < array.length; i++) {
    str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
    for (var index in array[i]) {
      str += '<td>' + array[i][index] + '</td>';
    }
    str += '</tr>';
  }
  str += '</tbody>'
  str += '</table>';
  return str;
}

I also looked for something FREE to do this, but everything I found was commercial or required hard coding column values. I did a quick blog post with additional details, screen shot and a simple VS 2008 demo. Overall, it’s working perfect for what I needed.

Blog Article on JSON data to HTML Table