Display JSON string Data in HTML Table

Question

I get the following JSON String from server as response enter image description here Here is my Jquery Code

function loadCategories() {
        $.ajax({
            type: "POST",
            url: "/Services/ControllerService.asmx/Get",
            data: {},
            cache: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var jsonArray = JSON.parse(result.d);

                alert(jsonArray);




            }, error: function (msg) {
                alert('Error : while executing the outlets : ' + msg.responseText);
            }
        });
    }

The alert shows the JSON String Correctly. Now i want to map this response to an html table showing columns "a" and "b"

  a        -             b

hasOtherInfo Undergratuate_in_Computing_Faculty

How can i do that ??

Answer 1

1. loop through the JSON data.
2. get the a and b value

3. write a function that takes care of splitting the value present in results.a.bindings.value & results.b.bindings.value based on the / and #

4. display the same in your html table 5(optional). use a jquery table plugin to display your results for a feel good look

Answer 2

You have some plugin that can achieve that:

• dynatable
• Json-to-HTML-Table

Answer 3

As inspecting from your json data you can do this:

var tr="";
$.each(jsonArray.results.bindings, function(i,v)
    {
        var td="";
        $.each(v, function(r,s)
            {
                td+='<td>'+s.type+'</td>';
            });

        tr+= '<tr>'+td+'</tr>';

    });
$("yourTableName").find("tbody").html("").html(tr);