Javascript- How to pass array to add table row onclick funtion

Question

I have an array and branch_id that I want to pass to javascript add table row with onclick function.

var branch_id = 1;
var member_data= [];
    member_data.push({
        phone: 123,
        name: "aaa",
        id: 3,
    });
    member_data.push({
        phone: 456,
        name: "bbb",
        id: 4,
    });
  addrow(branch_id ,member_data)

Pass data and array to addrow function, and set array as the parameter in onclick function. When click on the Show button, it will show all the array data

function addrow(branch_id, member_data){
   console.log(member_data)//able to read array
   var table = document.getElementById("itemTable");
   var tableRow = table.rows.length;
   var row = table.insertRow(tableRow);
   var cell1 = row.insertCell(0);

   cell1.innerHTML = 
                    '<button type="button" onclick="show_member(member_data)">Show</button>'//this line of show "member_data is not defined"
                    + '<input type="text" name="branch" value="'+branch_id+'">';
}

function show_member(member_data){
    for (var i = 0; i < member_data.length; i++) {
       alert(member_data[i]);
    }
}

But I am unable to pass the array to the onclick, it show "member_data is not defined". Isn't possible to pass array to onclick function

Answer 1

You haven't shown your complete code, but if you temporarily change show_member(member_data) to show_member("fake data") , you get an error indicating that show_member is not defined, which tells us that the problem is not just that member_data can't be found, but indeed the show_member function can't be found either. This tells us that the problem is scope.

I've reorganized your code so that the items that need to be accessible are put into a more persistent scope and the code now runs:

<script>

// These variables and functions are being declared in a higher scope than where 
// they will be called from, which makes them accessible to any lower scopes.
var branch_id = 1;
var member_data = [];
member_data.push({
  phone: 123,
  name: "aaa",
  id: 3,
});

member_data.push({
  phone: 456,
  name: "bbb",
  id: 4,
});

function show_member(data) {
  for (var i = 0; i < data.length; i++) {
    alert(data[i].phone);
  }
}

function addrow(branch_id, member_data) {
  console.log(member_data)//able to read array
  var table = document.getElementById("itemTable");
  var tableRow = table.rows.length;
  var row = table.insertRow(tableRow);
  var cell1 = row.insertCell(0);

  cell1.innerHTML = '<button type="button" onclick="show_member(member_data)">Show</button>'
                    + '<input type="text" name="branch" value="' + branch_id + '">';
}

window.addEventListener("DOMContentLoaded", function () {
  // addrow was declared at a higher scope, so it's accessible here
  // We need to have this function call wait until the DOM is loaded
  // because it needs to scan the DOM for the table elements
  addrow(branch_id, member_data);
});

</script>