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 ??

can post the actual response?

guradio
– guradio

2016-06-15 07:36:50 +00:00
Commented Jun 15, 2016 at 7:36 — guradio
– guradio, Commented Jun 15, 2016 at 7:36

coolstoner · Accepted Answer · 2016-06-15 07:33:35Z

1

loop through the JSON data.
get the a and b value
write a function that takes care of splitting the value present in results.a.bindings.value & results.b.bindings.value based on the / and #
display the same in your html table 5(optional). use a jquery table plugin to display your results for a feel good look

answered Jun 15, 2016 at 7:33

coolstoner

8012 gold badges10 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Isuru Lakshan Over a year ago

Can you give an example

coolstoner Over a year ago

can you use pastebin to paste your json returned data and share the link? pastebin.com/index.php meanwhile you can look at the solution given by user6367045... you need to add the split functionality in there

Ygalbel · Accepted Answer · 2016-06-15 07:26:27Z

0

You have some plugin that can achieve that:

answered Jun 15, 2016 at 7:26

Ygalbel

5,5491 gold badge27 silver badges33 bronze badges

Comments

bicky · Accepted Answer · 2016-06-15 08:46:17Z

0

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);

answered Jun 15, 2016 at 8:46

bicky

515 bronze badges

Collectives™ on Stack Overflow

Display JSON string Data in HTML Table

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related