How do I append data retrieved via Ajax correctly to the DOM?

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

  }

}