In my js function,I create a div and a link ,when click the link,I will pass a parameter the another js funcion?What's wrong with my code?

js function1

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();//a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson(" + dataItem +")'><span title='spantitle'><i class='icon-mouse'></i></span></a>;</div>";

So I try to add the "[]" to the function,but it still show wrong.

js function2

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();// a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson([" + dataItem +"])'><span title='spantitle' ><i class='icon-mouse'></i></span></a>;</div>";

In my js function,I create a div and a link ,when click the link,I will pass a parameter the another js funcion?What's wrong with my code?

js function1

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();//a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson(" + dataItem +")'><span title='spantitle'><i class='icon-mouse'></i></span></a>;</div>";

So I try to add the "[]" to the function,but it still show wrong.

js function2

 //pass a json:the browser show wrong:SyntaxError: missing ] after element list
 //passJson([object Object])
 var dataItem=getDataItem();// a json object which has title and name property
 var divStr="<div><a style='cursor: pointer' onclick='passJson([" + dataItem +"])'><span title='spantitle' ><i class='icon-mouse'></i></span></a>;</div>";

• javascript
• jquery
• json

• When do you get the Syntax error ? After your 'passJson' did JSON.parse ? – sebilasse Commented Apr 13, 2014 at 9:14
• 1 Seirsously, why are trying to turn data into a string to pass it to a function by assigning a string to onclick? Geez, not a recommended design pattern in ANY way. If you want to associate some data with the object via the HTML, then make it a data-xxx attribute on the HTML object and then fetch that attribute from your event handler. – jfriend00 Commented Apr 13, 2014 at 9:22
• 1 You can't have multiline strings like that. Either escape the newline character, or make each line a string and concatenate them. – Zirak Commented Apr 13, 2014 at 9:26
• In the other function,I also want to use the json object,both of it's title and name.One way is to pass two parameter(dataItem.title,dataItem.name),the other way is to pass the json.I choose last way,but it seems wrong.In fact,it is only one line,but the format can not allow me to write one line above. – flower Commented Apr 13, 2014 at 9:38
• I have edited the question again. – flower Commented Apr 13, 2014 at 9:49

2 Answers 2

Typically, you don't call it a JSON object. You just call it a JavaScript object.

The way your code is, you don't need to do string concatenation. You can just do onclick='passJson(dataItem)' as in

http://jsfiddle.net/6LzCA/5/

function passJson(obj) {
    console.log(obj);
}

var dataItem={ title: "hello", name: "snoopy" }; //a json object which has title and name property

var divStr="<div id='foo'><a style='cursor: pointer' onclick='passJson(dataItem)'><span title='spantitle'><i class='icon-mouse'></i>hmmm</span></a>;</div>";

$("body").append(divStr);

and it will work when you click on the link "hmmm".

You probably want to add the markup separately, and then bind a click handler to the link, because typically, we would like to go with the approach of unobtrusive JavaScript.

function passJson(data) {
  console.log(data); 
}
function getDataItem (){
 return {'title':'mytitle','name':'helloName'}; 
}
$(document).ready(function(){
  var dataItem=getDataItem();// a json object which has title and name property
  dataItem = JSON.stringify(dataItem);
  var divStr="<div><a style='cursor: pointer' onclick='passJson("+dataItem+")'>       hello clik me<span title='spantitle'><i class='icon-mouse'> </i> </span></a>;</div>";
 $('body').html($(divStr));
});