CODEWITHSUNDEEP
jqueryhtmljsongetjson
Queen Solutions
Queen Solutions

Reputation: 253

Parsing JSON Data and show in HTML web page

I have HTML web page i want to show the JSON Data in it i am using following code but it does not show any thing on page.

I am getting Data JSON USING URL which is also listed in code .

jQuery

$("document").ready(function () {
    $.getJSON("http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1", 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>");
    });
});

HTML

<table id="div-my-table"></table>

Upvotes: 0

Views: 7526

Answers (4)

Vineeth Bhaskaran
Vineeth Bhaskaran

Reputation: 2271

We can Implement Jquery Template for easy rendering of JSON data.The usage is as follows

1.Download "jquery.tmpl.min.js" file and include in your page.

2.We are considering the table
as our container.And the we will define the template need to to be inserted into the container.

Example of Template:

  //The data inside JSON object we will use as follows
 //Note:Template definition should be inside Script tag same as javascript functions
 <script id="tableContentTemplate" type="text/x-jquery-tmpl">
    <tr> 
      <td> Deal Id :\${EncoderName }</td> 
      <td> Deal Id :\${EncoderStatus }</td> 
    </tr>   
 </script>

3. Define methods to render data through template to container.Based on requirements we can change these methods as they are user defined methods

 function emptyContainer(container){    
  $( container ).empty();    
 }

function renderTemplate( container, template, data ){        
  $.tmpl( $(template), data, {array: data} ).appendTo( container );
}

function AddExtraTemplate( container, template ){
    $.tmpl( $(template)).appendTo( container );
}

4.In success function of Ajax call the methods as follows 

 $.getJSON("http://www.celeritas-solutions.com/pah_brd_v1/productivo/getGroups.php?organizationCode=att&userId1", function (data) {
    emptyContainer("#div-my-table");//empty container
    renderTemplateForOffice( "#div-my-table", "#tableContentTemplate" , data ); 
    // render template based on data.For multiple values it will render multiple times.Separate Iteration is not required.
});

Please inspect your json Data, It should look like as follows {'EncoderName':'XYZ','EncoderStatus':'Completed'}

Upvotes: 1

Mutahhir
Mutahhir

Reputation: 3832

The following section

$("#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>");

should be something like:

var $table = $('<table></table>');
$.each(data, function(i, item) {
    $table.append("<tr><td>" + item.EncoderName +"</td><td>" + item.EncoderStatus + "</td></tr>");
});
$("#div-my-table").append($table);

Also: $('document') should be $(document) because $('document') looks for an element <document></document> which does not exist. Whereas $(document) converts the document global object to a jQuery object.

In the first correction, please remember that $.text('') does not handle html, and will write the result as just '&lt;table&gt;'. The above corrected model is also better because using a disconnected/not-attached jquery object to populate elements from an iterator is faster.

EDIT: The url you've specified is marked as Malware by chrome, so I'm using a substitute service http://date.jsontest.com/. Also, since that service just returns one object, I'm wrapping that object in an array myself so that you can still see how $.each was working. The fiddle is here: http://jsfiddle.net/2xTjf/

Upvotes: 1

000
000

Reputation: 27227

    $("#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>");

append does not output the html directly like that. It appends full elements and won't take broken pieces of html. You want:

    var $table = $("<table></table>");
    $.each(data, function (i, item) {
        $table.append($("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>"));
    });
    $("#div-my-table").append($table);

edit

To make this a full solution, also you need $(document) rather than $("document").

Upvotes: 2

Praveen
Praveen

Reputation: 56501

I think this is your problem

$("document").ready(function () {

remove quotes

$(document).ready(function () {

Upvotes: 1

Related Questions