Passing PHP array through JSOn for output in Jquery

Question

I am working on a jQuery script that retrieves a PHP array from MySQL database and returns it as a JSON object. This all works correctly and I can output the raw JSON object, including the key.

The issue I am having is the way I am outputting it, which I currently do using jQuery's $.each.

Example: (Not the full script, just what is needed)

                if(data){
                $.each(data, function(key, data) {
                $('#div').append(  key + ' : '  + data  );

                });

        }

    } , 'json')

So at the moment the output is like so: Example

     Name: Tom Age: 20 Gender: Male

However I don't want all results of the array to be returned, which is what $.each is doing. I want to manually output different parts of the array, where and when I want.

I tried something like this so that I could just get the array result that has the Key of "name" but it did not work (one of my array keys is name):

    $('#div').append(  key + ' : '  + data['name']  );

Any suggestions?

EDIT: Making it a bit more clear:

Rather than looping through and outputting the entire array I want to output only select parts: eg;

data.name data.age

Those for example will only output the 2 arrays with the name and age key, even if the array has 10 other results.

Array we are working with is like so, only 1 result, but with multiple values.:

    {Name: 'Tom' Age: 20 Gender: 'Male'}

Answer 1

What about:

$.each(data, function(key, data) {
    $('#div #span-'+key).html(data);
});

So if you have the keys name, age, gender, you need 3 spans with the ID: #span-name, #span-age, #span-gender and they will be filled in with the data. If you only need name and age, just delete your #span-gender span and it won't show.

Your html will be something like:

<div id="div">
    <span id="span-name"></span>
    <span id="span-age"></span>
</div>

Answer 2

I think you want to do this:

$.each(data, function(key, val) {
   $('#div').html(key + ' : '  + val.name);
});

suggestion: use .html() it will let you to update the div with latest results .append() will append the result with previous results.

Answer 3

Use different variable names in the each . You are using data as the main object as well as second argument of callback. Also note that use of keys is case sensitive

Change the second to something else

$.each(data, function(key, item) {
                $('#div').append( item.Name  )

ALso not clear what your data looks like. I am assuming it is an array of objects like:

[ {Name: 'Tom' Age: 20 Gender: 'Male'}, {Name: 'Jane' Age: 20 Gender: 'Female'}]

If the data is only a single object only, and no array, you don't need to use $.each and just access the object directly using object notations

{Name: 'Tom' Age: 20 Gender: 'Male'}
alert( data.Name);

Answer 4

In your jQuery code, do this.

if(data){
    var dec_data = jQuery.parseJSON(data[0]);
    //Loop over it now
    jQuery.each(dec_data, function(key, val){
        //Stick it in the div
        jQuery('div').append(key+' - '+val);
    });
}