Question

I have a JSON packet that is not just ‘data’ – there is some metadata associated with it – but I can’t seem to reference that…

Here’s what it looks like (the JSON)

{ "count":"4",
  "companies": [
{ "id":"1", "company":"Acme", "address":"1234 street st.", "city":"New York", "state":"NY", "zip":"02123", "phone":"212-222-2222", "contact":"Billy Bob", "email":"[e-mail]", "jobscurrent":"12", "jobsdone":"11" },
{ "id":"3", "company":"Acme", "address":"1234 street st.", "city":"New York", "state":"NY", "zip":"02123", "phone":"212-222-2222", "contact":"Billy Bob", "email":"[e-mail]", "jobscurrent":"12", "jobsdone":"11" },
{ "id":"4", "company":"Acme", "address":"1234 street st.", "city":"New York", "state":"NY", "zip":"02123", "phone":"212-222-2222", "contact":"Billy Bob", "email":"[e-mail]", "jobscurrent":"12", "jobsdone":"11" },
{ "id":"5", "company":"Acme", "address":"1234 street st.", "city":"New York", "state":"NY", "zip":"02123", "phone":"212-222-2222", "contact":"Billy Bob", "email":"[e-mail]", "jobscurrent":"12", "jobsdone":"11" }
] }

Here is what my jQuery looks like…
Nested “each” – the first one (it’s my understanding) is looping over {count,companies}
and the one nested inside that is looping over each array in the customers array….

The second one is working fine (and works fine even if i don’t nest it inside the first one –
However I need to pass back something like “displaying n records” – but right now, the “value.count”

items.push('<tr class=""><td colspan="11">' + value.count + '</td></tr>' );

returns “UNDEFINED”

UGH! – and I just noticed it’s giving me my output twice… which I guess is to be expected – once for each iteration of the outside loop – since I have 2 elements

SO the question is – how can I reference my meta data once… obviously I don’t wnat to use the EACH
for that..

I tried just “data.count” to reference it – but I got nothing, which is why I went to the “EACH” way of extracting JSON vars…

function loadTable() {
    $.ajax({
        type: 'POST',   
        url: 'company_list.php',    
        dataType: 'json',   
        success: function ( data ) {                
            var items = [];
            var line = 1;

            $.each( data, function ( key, value ) {
                // meta data
                items.push('<tr class=""><td colspan="11">' + value.count + '</td></tr>' );

                // the real data
                $.each( data.companies, function ( key, value ) {   
                    var thisRowClass = 'odd';
                    if ( line % 2 ) {
                        thisRowClass = 'even';
                    }
                    items.push('<tr class="' + thisRowClass + '"><td>'  + value.company + 
                               '</td><td>' + value.address + 
                               '</td><td>' + value.city + 
                               '</td><td>' + value.state + 
                               '</td><td>' + value.zip + 
                               '</td><td>' + value.phone + 
                               '</td><td>' + value.contact + 
                               '</td><td>' + value.email + 
                               '</td><td>' + value.jobscurrent + 
                               '</td><td>' + value.jobsdone + 
                               '</td><td> edit | delete ' +
                               '</td></tr>');   
                    line++;
                }); 
            });

            //$( '#message' ).html( '<p>Displaying' + value.count + '</p>' );   
            $( '#companies-list' ).append( items.join('') );                                   

        },

        error: function () {    
            // there's an error
            $( '#message' ).html( '<p>There was a problem on the server... </p>' ); 
        }
    });
}

Answer 1

You want data.count and not value.count:

items.push('<tr class=""><td colspan="11">' + data.count + '</td></tr>' );

Actually, I think your outer $.each might be unnecessary if the entire structure of your JSON looks like that. In other words:

success: function (data) {
    var items = [];
    var line = 1;

    // meta data
    items.push('<tr class=""><td colspan="11">' + data.count + '</td></tr>');

    // the real data
    $.each(data.companies, function (key, value) {
        var thisRowClass = 'odd';
        if (line % 2) {
            thisRowClass = 'even';
        }
        items.push('<tr class="' + thisRowClass + '"><td>' + value.company +
            '</td><td>' + value.address +
            '</td><td>' + value.city +
            '</td><td>' + value.state +
            '</td><td>' + value.zip +
            '</td><td>' + value.phone +
            '</td><td>' + value.contact +
            '</td><td>' + value.email +
            '</td><td>' + value.jobscurrent +
            '</td><td>' + value.jobsdone +
            '</td><td> edit | delete ' +
            '</td></tr>');
        line++;
    });

    //$( '#message' ).html( '<p>Displaying' + value.count + '</p>' );   
    $('#companies-list').append(items.join(''));
};

Example: http://jsfiddle.net/gyDMP/1/