jQuery arrays/objects unusual iteration

Question

I got 4 std class objects i deliver from db through json to javascript like this:

var options_de = <?php echo $data[0]->options_de; ?>;
var options_cz = <?php echo $data[0]->options_cz; ?>;
var options_en = <?php echo $data[0]->options_en; ?>;
var options_pl = <?php echo $data[0]->options_pl; ?>;

EDIT: This is solution:

for(var x=1; x<=Object.keys(options_de).length; x++) {
    $('.d_options').append('<input type="text" class="i_options_de" autocomplete="off" value="'+options_de[x]+'" />');
    $('.d_options').append('<input type="text" class="i_options_cz" autocomplete="off" value="'+options_cz[x]+'" />');
    $('.d_options').append('<input type="text" class="i_options_en" autocomplete="off" value="'+options_en[x]+'" />');
    $('.d_options').append('<input type="text" class="i_options_pl" autocomplete="off" value="'+options_pl[x]+'" /><a class="remove">X</a>');
}

All works fine but unfortunetely im getting each loop from beginning to the end before next loop starts and i cant have that. I need this to go like that:

1 de 1 cz 1 en 1 pl
2 de 2 cz 2 en 2 pl
and so on and so forth

anyone has idea how to modify it to work the way i need it to? ;)

i tried that, but it would require array refer like this `options_de[counter i.e. 1 or 4]` and in this case it doesnt return anything beacuse it says its undefined — Mevia, Jun 07 '14 at 08:00

score 2 · Accepted Answer · edited May 23 '17 at 10:26

2

Javascript objects are not the same as arrays, and do not have the length property. Rather, do something like this to handle different object lengths:

https://stackoverflow.com/a/6700/3715815

edited May 23 '17 at 10:26

Community

1
1

answered Jun 07 '14 at 08:07

martin.code

1,291
9
12

Using your link i figured it out and posted solution in my topic, tank you ;) – Mevia Jun 07 '14 at 08:21

score 0 · Answer 2 · answered Jun 07 '14 at 07:55

0

If all objects are the same length, just include all objects in one loop, this will output all first members in the first iteration, all second in the next and so forth.

answered Jun 07 '14 at 07:55

martin.code

1,291
9
12

score 0 · Answer 3 · answered Jun 07 '14 at 08:18

You can simply iterate over the array and check each time if the index makes sense

vanilla JS

var options_de = ['1 de', '2 de', '3 de'];
var options_cz = ['1 cz', '2 cz', '3 cz'];
var options_en = ['1 en', '2 en'];
var options_pl = ['1 pl', '2 pl', '3 pl'];

var decorate = function(element){
    return '<input type="text" class="i_options_de" autocomplete="off"   value="'+element+'">';
}

var max_length = Math.max(options_de.length,
                          options_cz.length,
                          options_en.length,
                          options_pl.length);

var html = [];
html.push('<ul>');
for(var i = 0; i < max_length; i++){
    html.push('<li>');
    options_de.length > i ? html.push(decorate(options_de[i])) : null;
    options_cz.length > i ? html.push(decorate(options_cz[i])) : null;
    options_en.length > i ? html.push(decorate(options_en[i])) : null;
    options_pl.length > i ? html.push(decorate(options_pl[i])) : null;
    html.push('</li>');
}
html.push('</ul>');

html = html.join('');

document.getElementsByTagName('body')[0].innerHTML = html;

JSFidle: http://jsfiddle.net/kVd4K/

jQuery arrays/objects unusual iteration

3 Answers3