Javascript- How to pass array as parameter at onclick event?

Question

I have an array that I want to pass to a javascript onclick function. I send that array in the onclick event of a button. The onclick function return me [object Object]. Is there a different way to do call that function with the array?

Here My Code:

var data_type= $.parseJSON(data_playtype[1]);//{"1":"apple","2":"orange","23":"berry","8":"grape","9":"mango"}


str1.push('<td><a href="javascript:void(0)" onClick="showABC(\''+data_type+'\')">'Data'</td>');



function showABC(fruit){

    $.each(fruit,function(pid,pt){
        alert(pt);
    });

}

Don't use HTML and inline event handlers. Use jQuery to build the DOM elements and to bind the event handler, so you can make use of closures. I highly recommend to read the jQuery tutorial: learn.jquery.com/using-jquery-core/manipulating-elements/…, learn.jquery.com/events/event-basics — Felix Kling
– Felix Kling, Commented Jun 22, 2015 at 2:11
pt is an object, so when you do alert(pt), it's stringifying the object to [object Object]. Try to access a specific key of that object. — Josh Beam
– Josh Beam, Commented Jun 22, 2015 at 2:11
@JoshBeam: The string conversion already happens earlier when the HTML is built. — Felix Kling
– Felix Kling, Commented Jun 22, 2015 at 2:12
@FelixKling, oh yeah, you're right. Talking about in the string'ed onClick, yes? — Josh Beam
– Josh Beam, Commented Jun 22, 2015 at 2:13

guest271314 · Accepted Answer · 2015-06-22 02:58:29Z

I have an array that I want to pass to a javascript onclick function. I send that array in the onclick event of a button. The onclick function return me [object Object]. Is there a different way to do call that function with the array?

Note, data_type not appear to be Array at js ; data_type appear to be Object

Try utilizing .on() , calling showABC() within click event handler with data_type as parameter.

var data_playtype = [];

data_playtype[1] = JSON.stringify({
  "1": "apple",
  "2": "orange",
  "23": "berry",
  "8": "grape",
  "9": "mango"
});

var data_type = $.parseJSON(data_playtype[1]);
//{"1":"apple","2":"orange","23":"berry","8":"grape","9":"mango"}

var str1 = [];
str1.push("<td><a href=javascript:void(0)>Data</a></td>");

function showABC(fruit) {

  $.each(fruit, function(pid, pt) {
    alert(pt);
  });

};

$("table tbody").append(str1).find("a")
  .on("click", function() {
    showABC(data_type)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody></tbody>
</table>

PeterKA · Accepted Answer · 2015-06-22 02:36:56Z

0

DEMO

Using inline JS is not a good idea. I would use a data attribute to hold the data as follows:

var data_type = .....;
var link = $('<a/>').data('data_type', data_type).html('Data');
str1.push( $('<td/>').html( link ) );

//event handler
link.on('click', function(e) {
    e.preventDefault();
    var data_type = $(this).data('data_type');
    .....
});

Ref: https://api.jquery.com/data/

.data( key, value )

key

Type: String A string naming the piece of data to set.

value

Type: Anything The new data value; this can be any Javascript type except undefined.

edited Jun 22, 2015 at 2:36

answered Jun 22, 2015 at 2:20

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

4 Comments

Felix Kling Over a year ago

Does jQuery automatically convert objects to JSON when passed to data?

PeterKA Over a year ago

@FelixKling, what exactly do you mean? What's your concern?

Felix Kling Over a year ago

Never mind, I was confused by "data attribute". Forgot that jQuery has its own data store.

PeterKA Over a year ago

But you do bring up a good point. No actual data attribute is added to the element.

Collectives™ on Stack Overflow

Javascript- How to pass array as parameter at onclick event?

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related