How to pass arguments/parameters with button clicks into functions?

Question

I have a simple function that is supposed to display either of two sets of data in a HTML table. This data comes from an external domain using an ajax request. Both sets of data have been parsed and are stored in two variables, named animalData and fruitNvegData.

I have two buttons which run the buildTable() function. I need to make each button pass the relevant data into the function. I know how to do this in JavaScript but that way doesn't work with jQuery. I have read many examples of passing arguments/parameters into a function but none of the methods work for me. I have tried a few variations on this kind of thing, but no joy:

$("animalButton").click({ param: animalData }, buildTable);

For now I am using animalData in the each() loop to make sure everything else is working. I have found many similar questions here on StackOverflow, but none of these work either. Like using bind() for instance.

This is my entire jquery code. So how do I pass the relevant data with each button click into the function?

  var animalData;  
  var fruitNvegData;

  $(document).ready(function() {

          $.ajax({
                  dataType: 'json',
                  url:   "http://www.adweb.agency/interview/api/animals",
                  type:  'get',
                  success:  function (data) {

                           animalData = $.parseJSON(data);

                         },

                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("animal data unavailable at this time");
                        }
                });

           $.ajax({
                  dataType: 'json',
                  url:   "http://www.adweb.agency/interview/api/fruitveg",
                  type:  'get',
                  success:  function (data) {

                            fruitNvegData = $.parseJSON(data);   

                        },

                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert("Fruit n Veg data unavailable at this time");
                        }
                });
         });


 function buildTable(){       

                         var i = 0;
                         var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';

                               $.each(animalData, function (idx, obj) {                                   
                                        table += ('<tr>');
                                        table += ('<td>' + obj.Title + '</td>');
                                        table += ('<td><img src="' + obj.ImageURLs.Thumb + '"></td>');
                                        table += ('<td>' + obj.Description + '</td>');
                                        table += ('</tr>');
                                  });

                     table += '</table>';
                    $("#tableContainer").html(table);
    };


     $("#animalButton").click(buildTable);

     $("#fruitNvegButton").click(buildTable);

Rory McCrossan · Accepted Answer · 2016-07-10 15:43:52Z

1

The issue you have is accessing your two variables whilst keeping the code simple. The easiest way to do this is to join your two variables, animalData and fruitNvegData into a single object.

You can then reference those variables via the keys of this parent object, which you can add to their respective buttons as data attributes. This then allows you to add a common class to those buttons and use a single event handler for both, something like this:

<div id="tableContainer"></div>

<button class="buildTable" data-key="animal">Populate animal table</button>
<button class="buildTable" data-key="fruitnveg">Populate animal table</button>

var data = {
    'animal': animalData,
    'fruitnveg': fruitNvegData
}

function buildTable() {
    var table = '<table class="mainTable"><tr><th>item</th><th>image</th><th>description</th></tr>';
    $.each(data[$(this).data('key')], function(idx, obj) {
        table += '<tr>';
        table += '<td>' + obj.Title + '</td>';
        table += '<td><img src="' + obj.ImageURLs.Thumb + '"></td>';
        table += '<td>' + obj.Description + '</td>';
        table += '</tr>';
    });
    table += '</table>';
    $("#tableContainer").html(table);
};

$(".buildTable").click(buildTable);

Working example

answered Jul 10, 2016 at 15:43

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

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

11 Comments

Forgive me I'm a drummer. Over a year ago

That's a lot for me to take in. Excellent and comprehensively answered. I shall test it now.

Rory McCrossan Over a year ago

No problems. Let me know if you need anything clarifying

Rory McCrossan Over a year ago

Which stored variables? If you mean the two ..Data vars, then they're added to the data object.

Forgive me I'm a drummer. Over a year ago

How do I join the two variables, animalData and fruitNvegData into the single object.

Rory McCrossan Over a year ago

That's what the first line of my JS example above is doing - var data = { 'animal': animalData, 'fruitnveg': fruitNvegData }

|

Collectives™ on Stack Overflow

How to pass arguments/parameters with button clicks into functions?

1 Answer 1

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related