How to pass a JSON object in javascript function as a function parameter?

Question

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

When do you get the Syntax error ? After your 'passJson' did JSON.parse ? — sebilasse
– sebilasse, Commented Apr 13, 2014 at 9:14
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
– jfriend00, Commented Apr 13, 2014 at 9:22
You can't have multiline strings like that. Either escape the newline character, or make each line a string and concatenate them. — Zirak
– 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
– flower, Commented Apr 13, 2014 at 9:38

nonopolarity · Accepted Answer · 2014-04-13 09:31:52Z

8

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.

edited Apr 13, 2014 at 9:31

answered Apr 13, 2014 at 9:24

nonopolarity

152k142 gold badges496 silver badges787 bronze badges

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

1 Comment

flower Over a year ago

Thank you for your service.Because the button and div is created by js function dynamically and it is really easily declarated in the function.

Maneesh Singh · Accepted Answer · 2014-04-13 09:48:39Z

4

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

answered Apr 13, 2014 at 9:48

Maneesh Singh

5752 silver badges13 bronze badges

Collectives™ on Stack Overflow

How to pass a JSON object in javascript function as a function parameter?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related