How can I [simply] use JSON data in a web application for a business line?

Question

I usually use JSON with jQuery to just return a string using html. However, I want to start using Javascript objects in my code.

What is the easiest way to start using json objects on my page?

Here's an example of an Ajax call (after $(document).ready( { ... }) , of course:

  $('#btn').click(function(event) { event.preventDefault(); var out = $('#result'); $.ajax({ url: "CustomerServices.asmx/GetCustomersByInvoiceCount", success: function(msg) { // // Iterate through the json results and spit them out to a page? // }, data: "{ 'invoiceCount' : 100 }" }); }); 

My WebMethod:

 [WebMethod(Description="Gets customers with more than n invoices")] public List<Customer> GetCustomersByInvoiceCount(int? invoiceCount) { using (dbDataContext db = new dbDataContext()) { return db.Customers.Where(c => c.InvoiceCount >= invoiceCount); } } 

What is coming back:

 {"d":[{"__type":"Customer","Account":"1116317","Name":"SOME COMPANY","Address":"UNit 1 , 392 JOHN ST. ","LastTransaction":"\/Date(1268294400000)\/","HighestBalance":13922.34},{"__type":"Customer","Account":"1116318","Name":"ANOTHER COMPANY","Address":"UNIT #345 , 392 JOHN ST. ","LastTransaction":"\/Date(1265097600000)\/","HighestBalance":549.42}]} 

What I would like to know is what people usually do with this returned json? Do you repeat properties and create html table on the fly?

Is there a way to "bind" JSON data using a javascript reflection version (something like a .Net GridView network control)

Do you throw this returned data into a Javascript object and then do something with it?

An example of what I want to achieve is having a simple html page (on a mobile device) with a list of sales customers. When you click on one of these customers, the customer ID is sent to the web service, which retrieves customer information that is related to the seller.

I know that the SO talent pool is pretty deep, so I decided that you all can lead in the right direction and give me some ideas on how best to approach this.

Answer 1

I would recommend you take a look at the various client templates available. There is even talk of integrating this with the next jQuery release here .

I prefer jTemplate for its simplicity and small size. But there are others. If you want to see it in action, check out one of our customer sites here . We found that it scales very well even for a large number of lines (> 1000).