Question

I want append some from array by jQuery.each and data hotel_id, number each hotel_id is 4, and this loop $.each(data[0].hotel_id,... }); run 4 times contents inside self, in case that there are or inserted in database rows residence_u and residence_p 3 times (each of they there are 3, not 4(like hotel_id)), when run the following code, this code not have error jus not work. if i remove codes $.each(info_ru.units,... }); and $.each(info_rp.start_date,... }); it worked:

(there are four data[0].hotel_id items but only three data[0].residence_u items. So when the outer loop gets to index === 3, there isn’t a data[0].residence_u[index])

See full my js code: http://jsfiddle.net/6sGBd/

This is summary from my js code in ajax call(url: 'get_gr',):

$.each(data[0].hotel_id, function (index, value) {
    var $li = $('<li><input name="hotel_id[]" value="' + value.hotel_id + '" style="display:none;"></li>');
    var $tooltip = $('<div class="tooltip"></div>').appendTo($li);
    $li.appendTo('#residence_name');

    var info_ru = data[0].residence_u[index];
    $.each(info_ru.units, function (index, value) {
        $tooltip.append(value + ' & ' + info_ru.extra[index] + ' & ' + info_ru.price[index] + '<br>');
    });

    var info_rp = data[0].residence_p[index];
    $.each(info_rp.start_date, function (index, value) {
        $tooltip.append(value + ' & ' + info_rp.end_date[index] + ' & ' + info_rp.price_change[index] + '<br>');
    });
    tool_tip()
});

This is output php code(url: 'get_gr',):

[{
    "guide": null,
    "hotel_id": [{
        "hotel_id": ["1"]
    }, {
        "hotel_id": ["2"]
    }, {
        "hotel_id": ["3"]
    }, {
        "hotel_id": ["4"]
    }],
    "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"]
    }],
    "residence_p": [{
        "start_date": ["1111", "2222"],
        "end_date": ["1111", "2222"],
        "price_change": ["1111", "2222"]
    }, {
        "start_date": ["3333", "444"],
        "end_date": ["3333", "4444"],
        "price_change": ["3333", "4444"]
    }, {
        "start_date": ["5555", "6666"],
        "end_date": ["5555", "6666"],
        "price_change": ["5555", "6666"]
    }]
}]

Output js code is this:

1
hello & 11 & 1,111,111
how & 22 & 2,222,222
what & 33
& 3,333,333,
1111 & 1111 & 1111
2222 & 2222 & 2222

2
fine & 44 & 4,444,444
3333 & 3333 & 3333
4444 & 4444 & 4444

3
thanks & 55 & 5,555,555
good & 66 & 6,666,666
5555 & 5555 & 5555
6666 & 6666 & 6666

4

How can fix it and What do i do?

Answer 1

The length of the residence_u array is only 3, so when index == 4 and you assign var info_ru = data[0].residence_u[index]; and then accessing an element of the undefined info_ru is an error and stops execution.

You can fix it by checking that info_ru and info_rp are objects that contain the the element you are looking for.

$.each(data[0].hotel_id, function (index, value) {
    var $li = $('<li><input name="hotel_id[]" value="' + value.hotel_id + '" style="display:none;"></li>');
    var $tooltip = $('<div class="tooltip"></div>').appendTo($li);
    $li.appendTo('#residence_name');

    var info_ru = data[0].residence_u[index];
    if (info_ru && typeof info_ru === 'object' && info_ru.hasOwnProperty('units')) {
        $.each(info_ru.units, function (index, value) {
          $tooltip.append(value + ' & ' + info_ru.extra[index] + ' & ' + info_ru.price[index] + '<br>');
        });
    }

    var info_rp = data[0].residence_p[index];
    if (info_rp && typeof info_rp === 'object' && info_rp.hasOwnProperty('start_date')) {
        $.each(info_rp.start_date, function (index, value) {
            $tooltip.append(value + ' & ' + info_rp.end_date[index] + ' & ' + info_rp.price_change[index] + '<br>');
        });
    }
    tool_tip()
});