Javascript Array empty on Ajax call

Question

i have a JS function that would send data to a server. In the function i fill a array(row_data) with data from input fields. The array is not empty and i can get values after i set them. But if i put the array to a ajax call, the array is completely empty. I dont't understand this behavior.

    function send_data() {
        var d = new Date();
        var row_data = [];
        timestamp = d.getTime();

        for(i = 1; i <= rows; i++) {
            row_data[i] = [];
            row_data[i]['bold'] = jQuery('#bold' + i + '_val').val();
            row_data[i]['italic'] = jQuery('#italic' + i + '_val').val();
            row_data[i]['underline'] = jQuery('#underline' + i + '_val').val();
            row_data[i]['align'] = jQuery('#align' + i + '_val').val();
            row_data[i]['capitalize'] = jQuery('#capitalize' + i + '_val').val();
            row_data[i]['curved'] = jQuery('#curved' + i + '_val').val();
            row_data[i]['font'] = jQuery('#font' + i + '_val').val();
            row_data[i]['font_size'] = jQuery('#fontsize' + i + '_val').val();
            row_data[i]['abstand'] = jQuery('#abstand' + i + '_val').val();
            row_data[i]['text'] = jQuery('#zeile' + i).val();

            if (row_data.length <1) alert("array is empty");
        }

        if (row_data.length <1) alert("array is empty");

        $.ajax({
          method: 'POST',
          url: server_script_url,
          cache: false,
          dataType: 'xml',
          data: {   'id': session_id,
                        'rows' : rows,
                        'row_data' : row_data
                    }
        })
        .done(function( xml ) {
            var image = $(xml).find('file').first().text();
            jQuery('#preview_image').attr('src', image + '?t=' + timestamp);
        })
        .fail(function() {
            alert('Leider gab es bei der Datenübermittlung einen unbekannten Fehler.');
        });

    }

T.J. Crowder · Accepted Answer · 2015-04-22 11:36:18Z

1

A couple of issues there:

Array indexes start at 0, not 1, so your first entry will have the value undefined, which is probably throwing things off.
Separately, you're initializing row_data[i] to [] (a blank array), but then you're assigning it non-index properties as though it were an object, which is also probably confusing the serialization.

You can avoid #1 by using push; you can avoid #2 by using {} instead of []. In fact, you can use an object literal to make the code a bit less repetitive overall:

for(i = 1; i <= rows; i++) {
//                v----- Note { rather than [
    row_data.push({
        'bold':  jQuery('#bold' + i + '_val').val(),
        'italic':  jQuery('#italic' + i + '_val').val(),
        'underline':  jQuery('#underline' + i + '_val').val(),
        'align':  jQuery('#align' + i + '_val').val(),
        'capitalize':  jQuery('#capitalize' + i + '_val').val(),
        'curved':  jQuery('#curved' + i + '_val').val(),
        'font':  jQuery('#font' + i + '_val').val(),
        'font_size':  jQuery('#fontsize' + i + '_val').val(),
        'abstand':  jQuery('#abstand' + i + '_val').val(),
        'text':  jQuery('#zeile' + i).val()
    });
//  ^------------------- Note } rather than ]
}
if (row_data.length <1) alert("array is empty");

Separately, but probably unrelated, your if was inside the loop; you probably wanted it after the loop to handle the case where there were no rows added. I've moved it above.

Side note: Because none of your property names is an invalid "identifier name" in JavaScript, we can also leave off the quotes around them in the initializer:

for(i = 1; i <= rows; i++) {
//                v----- Note { rather than [
    row_data.push({
        bold:  jQuery('#bold' + i + '_val').val(),
        italic:  jQuery('#italic' + i + '_val').val(),
        underline:  jQuery('#underline' + i + '_val').val(),
        align:  jQuery('#align' + i + '_val').val(),
        capitalize:  jQuery('#capitalize' + i + '_val').val(),
        curved:  jQuery('#curved' + i + '_val').val(),
        font:  jQuery('#font' + i + '_val').val(),
        font_size:  jQuery('#fontsize' + i + '_val').val(),
        abstand:  jQuery('#abstand' + i + '_val').val(),
        text:  jQuery('#zeile' + i).val()
    });
//  ^------------------- Note } rather than ]
}
if (row_data.length <1) alert("array is empty");

edited Apr 22, 2015 at 11:36

answered Apr 22, 2015 at 11:32

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

The Coder Over a year ago

Also he need to change for(i = 1; i <= rows; i++) to for(i = 0; i < rows; i++) . I mean the = in for condition

T.J. Crowder Over a year ago

@user1354678: Not necessarily, not if he wants selectors like #bold_1_val (rather than #bold_0_val). I'm assuming the ids in the HTML start with 1 rather than with 0.

Smedi Over a year ago

Perfect, this works! My main failure was to define an array instead an object? Thanks for the detailed answer.

Smedi Over a year ago

The if statement was only for testing purposes :-)

T.J. Crowder Over a year ago

@Smedi: "My main failure was to define an array instead an object?" I think it was both things together ("failure" is a bit harsh! :-) ), but yes, it was probably primarily that the serialization code expected those arrays inside the row_data array to only have "indexes" (all-digits properties) rather than having properties with names. JavaScript arrays are unusual in that they can have both (because they're not really arrays at all), and most serialization formats just ignore non-index properties.

AKZ · Accepted Answer · 2015-04-22 11:37:36Z

test this code

    for(var i = 0; i <= rows; i++) {
        row_data[i] = {};
        row_data[i]['bold'] = jQuery('#bold' + i + '_val').val();
        row_data[i]['italic'] = jQuery('#italic' + i + '_val').val();
        row_data[i]['underline'] = jQuery('#underline' + i + '_val').val();
        row_data[i]['align'] = jQuery('#align' + i + '_val').val();
        row_data[i]['capitalize'] = jQuery('#capitalize' + i + '_val').val();
        row_data[i]['curved'] = jQuery('#curved' + i + '_val').val();
        row_data[i]['font'] = jQuery('#font' + i + '_val').val();
        row_data[i]['font_size'] = jQuery('#fontsize' + i + '_val').val();
        row_data[i]['abstand'] = jQuery('#abstand' + i + '_val').val();
        row_data[i]['text'] = jQuery('#zeile' + i).val();

        if (row_data.length <1) alert("array is empty");
    }

Collectives™ on Stack Overflow

Javascript Array empty on Ajax call

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related