javascript - Passing PHP array through JSOn for output in Jquery
Get the solution ↓↓↓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
Solution:
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
Solution:
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
Solution:
Use different variable names in theeach
. You are usingdata
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
Solution:
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);
});
}
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: attempt to read property "id" on null
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.