Pass a JSON array into dynamically created onclick method of button jQuery

Question

Following is my code and data is json array i want to pass in onclick method of Update button

function populateData(data) {
        $(".studentPanel").show();
        for (var i = 0; i < data.length; i++) {

            $(".totalFee" + i).val(data[i].total.amount);

            for (var j = 0; j < data[i].submissions.length; j++) {

                var ts = new Date(data[i].submissions[j].created_at);
                var dateString = ts.getDate() + "-" + ts.getMonth() + "-" + ts.getYear();
                console.log(data[i].submissions[j].amount);
                var tableRows = "<tr><td>" + data[i].submissions[j].amount + "</td><td>" + dateString + "</td>" +
                    "<td><button class=\"btn btn-primary Update\" onclick='updateFees(\"" + data[i].submissions[j].id + "\")'>Update</button></td><td><button  onclick='deleteFees(\"" + data[i].submissions[j].id + "\")'  class=\"btn btn-danger Delete\">Delete</button></td>\n</tr>";
                console.log(tableRows);
                $(".feeTable" + i).append(tableRows);
            }

        }
    }

there is update button which i am creating in table row there is a onclick method i am not able to pass data as parameter in that function — vagish dixit, Sep 03 '18 at 17:30
if I saw it right, you're trying to pass an array into the inline code of the page, the onclick property of the button, which is not possible. Before I do continue, is this really your problem? — Lucas Noetzold, Sep 03 '18 at 17:35
If you need to add an array of objects you can try it with `JSON.stringify` or through data attributes, take a look at this [question](https://stackoverflow.com/questions/8542746/store-json-object-in-data-attribute-in-html-jquery). I'll strongly recommend you however, to refactor your code to pull out your HTML, avoid using inline methods, etc. It'll be much easier for you — Ricardo Fornes, Sep 03 '18 at 17:41

score 0 · Accepted Answer · answered Sep 03 '18 at 18:00

Since it seems that you're using jQuery, I would suggest that you add the listeners manually, but to do that you would need to create the elements and store them in variables prior.

Obs.: this code can be made much shorter and simpler, but for sake of readability I've done this way.

function populateData(data) {
        $(".studentPanel").show();
        for (var i = 0; i < data.length; i++) {

            $(".totalFee" + i).val(data[i].total.amount);

            for (var j = 0; j < data[i].submissions.length; j++) {

                var ts = new Date(data[i].submissions[j].created_at);
                var dateString = ts.getDate() + "-" + ts.getMonth() + "-" + ts.getYear();
                console.log(data[i].submissions[j].amount);

                var
                        tr = $("<tr>"),
                        td1 = $("<td>"),
                        td2 = $("<td>"),
                        td3 = $("<td>"),
                        td4 = $("<td>"),
                        btnUpdate = $("<button class='btn btn-primary Update'>"),
                        btnDelete = $("<button class='btn btn-danger Delete'>");

                $(".feeTable" + i).append(tr);
                tr.append(td1).append(td2).append(td3).append(td4);

                td1.append(data[i].submissions[j].amount);
                td2.append(dateString);

                td3.append(btnUpdate);
                td4.append(btnDelete);

                btnUpdate.append("Update");
                btnDelete.append("Delete");

                btnUpdate.click((event) => {
                    //put whatever your updateFees function does in here
                    console.log(event);
                    console.log(data[i].submissions[j].id); //your data is acessible
                });

                btnDelete.click((event) => {
                    //put whatever your deleteFees function does in here
                    console.log(event);
                    console.log(data[i].submissions[j].id); //your data is acessible
                });
            }
        }
    }

I also suggest you to take a good look on jQuery and javascript good pratices.

score 0 · Answer 2 · answered Sep 03 '18 at 18:15

This can be done using data-id attribute. Ex:

 var tableRows = "<tr>"+
                   "<td>" + data[i].submissions[j].amount + "</td>"+
                   "<td>" + dateString + "</td>" +
                   "<td>"+
                     "<button class='btn btn-primary Update' data-id=" + data[i].submissions[j].id + " onclick='updateFees()'>"+
                        "Update"+
                     "</button>"+
                   "</td>"+
                   "<td>"+
                     "<button onclick='deleteFees()' class='btn btn-danger Delete' data-id=" + data[i].submissions[j].id + ">"+
                       "Delete"+
                     "</button>"+
                    "</td>"+
                  "</tr>";

and then in function body of updateFees and deleteFees, this id can be accessed as:

function updateFees(e){
  var id = $(e.currentTarget).data("id");
  //Rest of the code follows here
}

Pass a JSON array into dynamically created onclick method of button jQuery

2 Answers2