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

There's a syntax error: name: bbb, should be name: "bbb", same for name: aaa, they're being interpreted as identifiers, not strings. — RobG
– RobG, Commented Mar 8, 2016 at 2:54
sorry for the mistake, thanks RobG remind, I have update the code — Arzozeus
– Arzozeus, Commented Mar 8, 2016 at 2:57
@daymannovaes at the beginning of the function addrow(branch_id, member_data), I loop and call member_data, the result show, but I pass it to the onclick,then error messagen show — Arzozeus
– Arzozeus, Commented Mar 8, 2016 at 3:05
But depending on the way you are defining the member_data variable, it won't be available globally. For example, if this var member_data is inside a function, this will not be accessible in to onClick. You must do somethin like window.member_data = ... or declare it outside the function. — daymannovaes
– daymannovaes, Commented Mar 10, 2016 at 11:01

Scott Marcus · Accepted Answer · 2016-03-08 22:28:00Z

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>

edited Mar 8, 2016 at 22:28

answered Mar 8, 2016 at 2:49

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

3 Comments

Arzozeus Over a year ago

it haven go to show_member(), when I click on the button Show, the error message show "member_data is not defined"

Arzozeus Over a year ago

sorry for the mistake, is the member name, i have change the code, it should be name:"aaa" and name:"bbb"

Arzozeus Over a year ago

in the beginning of the addrow function, the array able to read, but when I pass it to onclick="show_member(member_data)", unable to go to show_member function it show "member_data is not defined"

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related