I insert several(array
) value with json_encode
in one row from database table, now want echo they as order with jquery.
This is output from my PHP code with json_encode
:
[{
"guide": null,
"residence": [{
"name_r": "jack"
}, {
"name_r": "jim"
}, {
"name_r": "sara"
}],
"residence_u": [{
"units": ["hello", "how", "what"],
"extra": ["11", "22", "33"],
"price": ["1,111,111", "2,222,222", "3,333,333"]
}, {
"units": ["fine"],
"extra": ["44"],
"price": ["4,444,444"]
}, {
"units": ["thanks", "good"],
"extra": ["55", "66"],
"price": ["5,555,555", "6,666,666"]
}]
}]
And is my js code in ajax call ($.ajax({...
):
success: function (data) {
$.each(data[0].residence, function (index, value) {
$('ol#residence_name').append('<li><a href="" class="tool_tip" title="ok">' + value.name_r + '</a><div class="tooltip"></div></l开发者_StackOverflowi>');
var info = data[0].residence_u[index];
$.each(info.units, function (index, value) {
$('ol#residence_name li .tooltip').append(value + ' & ' + info.extra[index] + ' & ' + info.price[index] + '<br>');
})
});
Now by above js code, i have in output this:
jack
hello
&11
&1,111,111
how
&22
&2,222,222
what
&33
&3,333,333,
fine
&44
&4,444,444
thanks
&55
&5,555,555
good
&66
&6,666,666
jim
fine
&44
&4,444,444
thanks
&55
&5,555,555
good
&66
&6,666,666
sara
thanks
&55
&5,555,555
good
&66
&6,666,666
I want as:
jack
hello
&11
&1,111,111
how
&22
&2,222,222
what
&33
&3,333,333,
jim
fine
&44
&4,444,444
sara
thanks
&55
&5,555,555
good
&66
&6,666,666
What do i do?
Keep a reference to the tooltip element and append the info to it:
var $li = $('<li><a href="" class="tool_tip" title="ok">' + value.name_r + '</a></li>');
var $tooltip = $('<div class="tooltip"></div>').appendTo($li);
var info = data[0].residence_u[index];
$.each(info.units, function (index, value) {
$tooltip.append(value + ' & ' + info.extra[index] + ' & ' + info.price[index] + '<br>');
});
$li.appendTo('#residence_name');
Why does your code produce this result?
Because $('ol#residence_name li .tooltip')
will select every .tooltip
element in every li
inside #residence_name
, not just the currently created one.
That's quite a complicated data structure you're starting with - my first instinct would be to reorganise it into a less brain-melting format! But assuming the structure is fixed, a nice clear iteration structure can help to de-confuse matters. I've provided some code below which doesn't do anything, but which does provide an easier-to-understand framework in which to work. At every stage the variables you need are extracted ready for use, and it's up to you what to do with the data. Untested, but should work :)
// Declare the variables we're going to use
var i, j; // Iterating variables
var name, unitsArray, extraArray, priceArray; // Outer loop
var unit, extra, price; // Inner loop
// Loop through the people
for( i in data[0].residence ) {
// Assign the outer-loop variables
name = data[0].residence[i].name_r;
unitsArray = data[0].residence_u[i].units;
extraArray = data[0].residence_u[i].extra;
priceArray = data[0].residence_u[i].price;
// Do something here with the name
// For each person, loop through the things they said
for( j in unitsArray ) {
// Assign the inner-loop variables
unit = unitsArray[j];
extra = extraArray[j];
price = priceArray[j];
// Do something here with the 3 inner-loop variables
}
}
精彩评论