CODEWITHSUNDEEP
jqueryjson
user3196499
user3196499

Reputation: 1

Display returned JSON objects in a nice way

I was wondering if there is a way to display returning json objects from my server is a nice/pleasing way. IE Just show it on my webpage instead of an alert that I have now.

            success: function (data, textStatus, jqXHR) {
            alert(data.details + '\nHello ' + data.clientInfo.firstName + ' ' + data.clientInfo.lastName + '. \nBalance:' + data.clientInfo.balance);
        }

This is what I have now. I have failed to make the data show up on my webpage. Any hints/tips/suggestions.

Thank you.

Upvotes: 0

Views: 188

Answers (2)

Thanigainathan
Thanigainathan

Reputation: 1547

It would be nice to display the json contents directly using the template binding. You have to create a template with the class properties like below. I have copied the sample from Knockout.

<h2>Participants</h2>
Here are the participants:
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<div data-bind="template: { name: 'person-template', data: seller }"></div>

<script type="text/html" id="person-template">
    <h3 data-bind="text: name"></h3>
    <p>Credits: <span data-bind="text: credits"></span></p>
</script>

<script type="text/javascript">
 function MyViewModel() {
     this.buyer = { name: 'Franklin', credits: 250 };
     this.seller = { name: 'Mario', credits: 5800 };
 }
 ko.applyBindings(new MyViewModel());
</script>

You can also use any other template technology.

Upvotes: 0

Pankaj
Pankaj

Reputation: 592

Use JSONViewer

or if you want to format it programatically then to the following way

Programmatic formatting solution:

The JSON.stringify method supported by many modern browsers (including IE8) (For Detailed Support List) can output a better viewable JSON string:

JSON.stringify(jsObj, null, "\t"); 
JSON.stringify(jsObj, null, 5);

Fiddle For Your Code:Sample JSON OUTPUT

Upvotes: 1

Related Questions