Passing JQuery Arrays to Nested Function

Question

I'm having problems with dynamically adding a row to a table using data stored in two arrays (categories and treatments). The arrays are fine, I've determined that.

When passing just the categories array the new row displays but the select box reads [object:object], it's clearly blank.

When I pass a second array with it, as shown below, the console reads 'undefined is not a function'.

Any help would be hugely appreciated!

 // Add an extra row when button is clicked
 var counter = 1;
   $('input.add').click(categories, treatments, function(){
      counter++;      

      var newRow = '<tr><td><label for="category' + counter + '">Category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';      

      $.each(categories, function(key, value) {   
      $('#category' + counter)
         newRow += '<option value ="' + key + '">' + value + '</option>';
      });

      newRow += '</select></td><td><label for="treatment' + counter + '">Treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';

      $.each(treatments, function(key, value) {   
      $('#treatment' + counter)
         newRow += '<option value ="' + key + '">' + value + '</option>';
      });    

      newRow += '</select></td></tr>';     

      $('table.treatments').append(newRow);
   });
});

Please create a JsFiddle with the problem statement.

user626818
– user626818

2014-08-18 17:45:30 +00:00
Commented Aug 18, 2014 at 17:45 — user626818
– user626818, Commented Aug 18, 2014 at 17:45

emerson.marini · Accepted Answer · 2014-08-18 18:14:28Z

1

The first parameter for the jQuery .click() is an Object, and you're trying to pass two arrays.

This should work for you (remember to check for the missing semi-colons):

// Create an Object obj containing the two arrays.
$('input.add').click(obj = { categories: categories, treatments: treatments }, function () {
    counter++;

    var newRow = '<tr><td><label for="category' + counter + '">Category</label></td><td><select id="category' + counter + '" name="category' + counter + '" required="required">';

    // Use the obj.
    $.each(obj.categories, function (key, value) {
        $('#category' + counter);
        newRow += '<option value ="' + key + '">' + value + '</option>';
    });

    newRow += '</select></td><td><label for="treatment' + counter + '">Treatment</label></td><td><select id="treatment' + counter + '" name="treatment' + counter + '">';

    // Use the obj.
    $.each(obj.treatments, function (key, value) {
        $('#treatment' + counter);
        newRow += '<option value ="' + key + '">' + value + '</option>';
    });

    newRow += '</select></td></tr>';

    $('table.treatments').append(newRow);
});

Demo

jQuery .click()

edited Aug 18, 2014 at 18:14

answered Aug 18, 2014 at 18:05

emerson.marini

9,3462 gold badges35 silver badges50 bronze badges

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

2 Comments

MKC Over a year ago

Thanks for the response, that makes sense to me. The JFiddle you put up works perfectly, bizarrely though when copying and pasting the code I still have the same problem, the input box is showing [Object, object]. I have added a console log line to the function and it displays perfectly on the console, I can't understand why its not working properly

MKC Over a year ago

SOLVED - it was due to the structure of the arrays I believe as changing value to value.category did the trick. Thanks for your help, very much appreciated!

Collectives™ on Stack Overflow

Passing JQuery Arrays to Nested Function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related