Passing an array as a parameter of a function inside a for loop

Question

I am trying to pass an array of objects in a onclick function inside a for loop. The scope of the array is inside the for loop only, So I cannot do like this. A sample of my code is as follows:

for (var j = 0; j < globalVariables.countryColl.length; j++) { 
    var testArray = $.map(empCatgry2Arr, function (e, i) {
                        return {
                            Id: e.ID,
                            company: e.Company,
                            dept: e.Department
                        }
                    });
                    html += "<tr>" +
                        "<td>" + globalVariables.countryColl[j].Title + "</td>" +
                        '<td class="fc-green" onclick="ShowEmployeeDetails(' + testArray + ')">' + empCatgry2Count + '</td>' +
"</tr>";
}
html += "</tbody></table>";
$("#tablediv").append(html);

But when I inspect the page, the HTML looks like : "<td class="fc-green"><a onclick="showEmployeeDetails([object Object])">1</td>"

Initially I was trying to pass the whole empCatgry2Arr array, I have used the map function only to use required key-values.

What did you expect to be rendered in the HTML? You are concatenating a string with an array. Were you expecting a comma-delimited list or something? — John Wu
– John Wu, Commented Feb 1, 2021 at 7:16
Did this answer your question? stackoverflow.com/a/65989148/5236174 — Lahar Shah
– Lahar Shah, Commented Feb 1, 2021 at 17:31

John Wu · Accepted Answer · 2021-02-01 07:52:35Z

0

When you render Javascript, your program must render the source code the same way as if you were writing the code yourself.

The way to pass a new array to a javascript function is to place it inside square brackets and supply the initial values in a comma-delimited list.

var html = 'etc....onclick="ShowEmployeeDetails([' + testArray.join() + '])">' + empCatgry2Count + etc...';

answered Feb 1, 2021 at 7:52

John Wu

52.5k8 gold badges50 silver badges92 bronze badges

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

Comments

Lahar Shah · Accepted Answer · 2021-02-01 08:17:37Z

Create an element and bind the click event something like this, I used some mock data, on click you may see the console log where it logs the dynamically passed data!

function ShowEmployeeDetails(param) {
  console.log(param);
}

const html = $('<table></table>');

for (var j = 0; j < 3; j++) { 
    
    const num = j+1;
    let obj = {"id": num};

    const row = $('<tr></tr>').appendTo(html);
    // first td
    $('<td></td>').attr({ class: 'fc-green'}).text("Title" + num).appendTo(row);

    // second td    
    const td2 = $('<td></td>').text("ShowEmployeeDetails on click" + num).appendTo(row); 
    
    // bind the click event to the element and then append the element to row
    td2.on('click', ShowEmployeeDetails.bind(null, obj));
    td2.appendTo(row);   
}
$("#tablediv").append(html);

td {
border: 1px solid;
padding: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="tablediv"></div>

Collectives™ on Stack Overflow

Passing an array as a parameter of a function inside a for loop

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related