$.each and problem with it in jQuery

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

开发者_JS百科 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?

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()
});

you can use 'return' to break out of a loop.

so you can add

if(index === 3){
    return false;
}

right at the top of your first $.each

I would suggest several things:

1. If you stay with the same data format, then you should code defensively to guard against different array lengths in your three parallel arrays. You can code to iterate only over the shortest of the three arrays so your index never goes out of bounds.
2. You could fix your data structure so that all the data that goes together for a given iteration is in one object and thus you can never have different numbers of different attributes. You make an object with hotel_id, units, price, etc... rather than separate arrays for each of those. Keep all the properties with the object rather than arrays of properties that you then have to associate with an object.

As for your current code, your code logic is just flawed. You have an outer .each() loop that iterates over the hotel_id array which has 4 items, yet you use the index from that loop to reach into two other data structures that don't have the same number of items. Either your data is wrong or your code logic is flawed and, in both cases, your code is not written defensively to protect against mismatched array lengths.

To know what you'd really want to recommend when you have a different number of items in the hotel_id, residence_u and residence_p arrays, we'd have to understand a lot more about what you're really trying to do.

You can code defensively by changing your outer loop to iterate only as many as you have for the other arrays. So, if the shortest array is 3 long, then that's the most you iterate the outer loop so you index never goes out of bounds:

var minLen = Math.min(Math.min(data[0].hotel_id.length, data[0].residence_u.length), data[0].residence_u.length);
for (var index = 0; index < minLen; index++) {
    var value = data[0].hotel_id[index];
    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()
});