CODEWITHSUNDEEP
jquery
Psl
Psl

Reputation: 3920

Jquery to display a JSON data in a web page

I have to display a JSON data in a web page on button click

<table>
  <tr>
    <td style="height:10px;">
      <div id="testResult" style="padding-left: 120px; display: none; ">
        <img src="./images/spinner.gif" />Running the test...
      </div>
    </td>
  </tr>
</table>

It s the html data am using

Bellow is the code written in the button click

    $('#runBtn').click(function() {
         $.get('/getReport', function (data) {
alert(data) // prints [{ "id" : 16, "jobid" : "49", "status" : "Falied" }]
        $('#testResult').html(data);
        });
    }

But nothing is showing in the web page

Upvotes: 1

Views: 970

Answers (3)

ph3nx
ph3nx

Reputation: 1036

The div with the id "testResult" is hidden. Change your Jquery to the following example, to make it visible.

$('#runBtn').click(function() {
    $.get('/getReport', function (data) {
        alert(data) // prints [{ "id" : 16, "jobid" : "49", "status" : "Falied" }]
        $('#testResult').html(data).show();
    });
}

I made an example on jsfiddle. Try it here: jsfiddle.net/ph3nx/F6uAn/4/

Upvotes: 1

abhiklpm
abhiklpm

Reputation: 1653

Also you need to loop the data for getting each items from json object:

$.each(data, function(index, value) {
  alert(index + ': ' + value.Name);
});

Upvotes: 1

rixmit
rixmit

Reputation: 955

The 'display: none' part of your html div (with id 'testResult') prevents this div from showing. You should change/remove it.

Upvotes: 0

Related Questions