How can I [simply] consume JSON Data in a Line of Business Web Application

Question

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

What's the simplest way to get started using json objects on my page?

Here's a sample 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 gets returned:

{"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'd LIKE to know, is what are people generally doing with this returned json? Do you iterate through the properties and create an html table on the fly?

Is there way to "bind" JSON data using a javascript version of reflection ( something like the .Net GridView 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 to have an plain ol' html page ( on a mobile device )with a list of a Salesperson's Customers. When one of those customers are clicked, the customer id gets sent to a webservice which retrieves the customer details that are relevant to a sales person.

I know the SO talent pool is quite deep so I figured you all here would be able to guide in the right direction and give me a few ideas on the best way to approach this.

Answer 1

I would recommend you have a look a the various client template solutions available. There are even talks of integration 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 one of our clients sites here. We found that it scales very well even to a large amount of rows (>1000).