Passing an object variable through html

Question

I am trying to pass an object through HTML but am getting the

Uncaught SyntaxError: Unexpected end of input

error. I am still learning JavaScript DOM and would appreciate any help.

data = getdata(); //retreive my data
var mtable = document.createElement("table"); //create table element via javascript
mtable.innerHTML += "<tr><th>Name</th><th>Modify</th></tr>";
for (i = 0; i < data.length; i++) {
    var ins = createEle("tr");
    ins.innerHTML = "<td>" + data[i]['name'] + "</td>";
    ins.innerHTML += "<td><button id=" + data[i]['tid'] + " onclick=make_modifytourney2(this.id," + data[i] + ")>Modify</button></td></tr>";
    mtable.appendChild(ins);
}

I am then appending mtable to the document. data[i] is an array object which I want to pass via this code but it is not working. I know that I can use tid to retrieve again this data but I'd rather not since the data is already there.

Edit: My createEle

function createEle(ele, css) {
var nn = document.createElement(ele);
nn.setAttribute("class", css);
return nn;
}

a simple helper Edit 2 My array data will be something like this

  data=[(4) [{…}, {…}, {…}, {…}]
  0
  :
  {name: "T1", tid: 1, fdate: "2018-07-11", tdate: "2018-07-26", category: "mens", …}
  1
  :
  {name: "T2", tid: 2, fdate: "2018-07-20", tdate: "2018-07-26", category: "womens", …}
  2
  :
  {name: "nart", tid: 3, fdate: "0001-01-01", tdate: "0001-01-01", category: "1", …}
  3
  :
  {name: "xyz", tid: 4, fdate: "0001-01-01", tdate: "0222-02-01", category: "23", …}]

Answer 1

Your error occurs when clicking the Modify button you generated.

Mainly because you declared this instruction in your onclick attribute with this :

make_modifytourney2(this.id," + data[i] + ")

which generates the following HTML code :

<button id="undefined" onclick="make_modifytourney2(this.id,[object" object])>Modify</button>

And now you have some cut JavaScript code in your onclick attribute.

I don't know if it's a typo or not, but anyway, if you want get rid of that error, you need to :

• use escaped double quotes to encapsulate the onclick attribute instruction
• use espaced single quotes to encapsulte the parameters of your function call

Your code will be :

ins.innerHTML += "<td><button id=" + data[i]['tid'] + " onclick=\"make_modifytourney2(this.id,'" + data[i] + "')\">Modify</button></td></tr>";

function getdata() { 
  return [{name : "John"}, {name : "Jack"}];
}

function createEle(ele, css) {
  var nn = document.createElement(ele);
  nn.setAttribute("class", css);
  return nn;
}

function make_modifytourney2(param1, param2) {
  console.log(`Clicked Modify with params : ${param1}, ${param2}`);
}

var data = getdata(); //retreive my data
var mtable = document.createElement("table"); //create table element via javascript
mtable.innerHTML += "<tr><th>Name</th><th>Modify</th></tr>";
for (i = 0; i < data.length; i++) {
  var ins = createEle("tr");
  ins.innerHTML = "<td>" + data[i]['name'] + "</td>"
  ins.innerHTML += "<td><button id=" + data[i]['tid'] + " onclick=\"make_modifytourney2(this.id,'" + data[i] + "')\">Modify</button></td></tr>";
  mtable.appendChild(ins);
}
document.body.appendChild(mtable);

Now this is kind of messy because of the way you generate your element. It would rather suggest you use DOM elements as JavaScript object and use an event listener.

Here's what it would look like :

function getdata() {
  // dummy object with a tid and a name field 
  return [{
    tid: '1',
    name: "John"
  }, {
    tid: '2',
    name: "Jack"
  }];
}

function createEle(ele, css) {
  var nn = document.createElement(ele);
  nn.setAttribute("class", css);
  return nn;
}

// function that creates a TD element with a child 
function createTd(child) {
  var td = document.createElement("td");
  td.appendChild(child);
  return td;
}

// function that creates a modify button based on your data object 
function createModifyButton(data) {
  var button = document.createElement("button");
  button.id = data.tid;
  button.addEventListener("click", function() {
    // use whatever parameter you need from the data object : 
    make_modifytourney2(data.tid, data.name);
  });
  button.appendChild(document.createTextNode("Modify"));
  return button;
}

function make_modifytourney2(param1, param2) {
  console.log(`Clicked Modify with params : ${param1}, ${param2}`);
}

// local variables 
var data, mtable, i, ins, row1, row2;

data = getdata(); //retreive my data
mtable = document.createElement("table"); //create table element via javascript
mtable.innerHTML += "<tr><th>Name</th><th>Modify</th></tr>";
for (i = 0; i < data.length; i++) {
  ins = createEle("tr");
  // creating tds and appending them : 
  row1 = createTd(document.createTextNode(data[i]['name']));
  ins.appendChild(row1);
  row2 = createTd(createModifyButton(data[i]));
  ins.appendChild(row2);

  mtable.appendChild(ins);
}
document.body.appendChild(mtable);