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", …}]

You need a semi-colon after this line: ins.innerHTML = "<td>" + data[i]['name'] + "</td>". Also, you may benefit from familiarizing with template literals — Tyler Roper
– Tyler Roper, Commented Jul 31, 2018 at 14:32
Inline event handlers like onclick or oninput are not recommended. They are an obsolete, hard-to-maintain and unintuitive way of registering events. Always use addEventListener or a similar functionality provided by the library of framework you use instead. data[i] is definitely not properly quoted. The missing ; is not the issue, as ASI takes care of that. — Sebastian Simon
– Sebastian Simon, Commented Jul 31, 2018 at 14:32
I tested your code. The error happens when clicking on the modify button. Can you confirm? — Guillaume Georges
– Guillaume Georges, Commented Jul 31, 2018 at 14:36
You may consider looking at the following page regarding using JavaScript to add a table to HTML w3schools.com/jsref/met_table_insertrow.asp — daddygames
– daddygames, Commented Jul 31, 2018 at 14:37

Guillaume Georges · Accepted Answer · 2018-07-31 15:12:59Z

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);

I actually did this before but what is happening is that the function is getting executed for every value of i ,i.e i am getting a clicked Modify for every sub-element in data
@NiteyaShah I updated my answer with another snippet using DOM elements as JavaScript objects and an event listener.
i believe that the odd execution is because every time my code refers to it in onclick it also executes it but im not sure

Marco · Accepted Answer · 2018-07-31 14:39:01Z

0

This error comes generally when you forget a bracket or parenthesis (often the two at the same time) Check if everything is closed correctly. If you don't find anything, check on an online parser, you will see the problem just by identing :)

Hope it helps!

answered Jul 31, 2018 at 14:39

Marco

1981 gold badge2 silver badges12 bronze badges

2 Comments

Tyler Roper Over a year ago

While this suggestion is certainly helpful, it is not an answer. In the future, consider posting this as a comment instead :)

Marco Over a year ago

Would you be able to paste your code in a CodePen or a Fiddle so that we can try it out?

Collectives™ on Stack Overflow

Passing an object variable through html

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related