[jQuery] Re: Ajax Created from JSON DataSet

Wed, 10 Oct 2007 13:56:07 -0700

Phunky,

I'm playing in that area right now. The code below shows part of a
Members object that reads in club membership data in json format and
builds an html table from it. Each individual member object in the
json is actually an array of data fields for efficiency sake, eg:

{"members":[
...
["Single","Katz","Howard","04.22.07","884-7662","[EMAIL PROTECTED]","3771
SC Hwy","","",""],
...
]}

Here's the relevant table-building code:

<script>
        $(document).ready(function() {
        //-------------------------
                var url = "json_data/SccaMembers.json.txt";

                Members.membersToTable( url, $('#container') );
        });

Members = {
        membersToTable: function( url, $container ) {
        //----------------------------------------
                var $table = $('<table/>');
                var table = $table.attr( "border", "1" )[0];
                var headers = [
"<tr>",
    "<th>Member Type</th>", "<th>Last</th>", "<th>First</th>",
    "<th>Last Paid</th>", "<th>Phone</th>", "<th>Email</th>",
    "<th>Address</th>", "<th>City</th>",
    "<th>Postal Code</th>", "<th>Notes</th>",
"</tr>"
].join('');

                $table.append( headers );

                $.getJSON( url, function( jsonObj ){
                        $.each( jsonObj.members, function(i, member) {
                                Members.memberToRow( member, table );
                        });
                        $container.append( $table );
                });
        },
        memberToRow: function( member, table ) {
        //------------------------------------
                var tr = document.createElement('tr');
                for( var i = 0; i < member.length; i++ ) {
                        var td = document.createElement('td');
                        td.appendChild(document.createTextNode( member[i]) );
                        tr.appendChild(td);
                }
                table.appendChild(tr);
        }
};
</script>

HTH,
Howard

On Oct 8, 5:12 am, Phunky <[EMAIL PROTECTED]> wrote:
> Hey guys,
>
> Im hoping that someone here will be able to post me in the right
> direction of an example for creating a <TABLE> from aJSONDataset.
>
> Im not sure what the best practice is for doing this and cant seem to
> find any tutorials about it either :( im having no problem retrieving
> the data, but im stuck on how to access theJSONObject and then loop
> through via the each() to append the data to the <TABLE>
>
> Thanks in advance

Reply via email to