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: e.g;

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>