Not able to pass object in a function Javascript

Question

Following is my plnkr, which is working fine If I am not passing any parameter to my open1 method, but I need to pass an object in $scope.open1 method but it is throwing error.

Let me know what I am doing wrong.

Plnkr - http://plnkr.co/edit/dzYfy1qtmBD3ng804nXR?p=preview

Code where I am facing issue -

  function imageHtml(data, type, full, meta) {
    // Error here
    var testData = {"key1": "val1", "key2": "val2"};
        return '<img src="'+data+'" ng-click="open1('+testData+')" />';
    }

I am alerting data via this method -

  $scope.open1 = function(data) {
    alert(data);
  };

EDIT -

Data needs to be pass on image click.

important dev note: never build and then set HTML using strings. It's not 1998 anymore, we learned many times over that this is an incredibly bad, and even dangerous, thing to do. Instead, create an image element (using document.createElement), set its attributes (using setAttribute) and then return that DOM node, so that you insert it where it is needed. Don't build strings. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Oct 12, 2015 at 17:46
That's a ridiculous statement @Mike'Pomax'Kamermans .. what do you think gets put to $templateCache ? — charlietfl
– charlietfl, Commented Oct 12, 2015 at 17:48
@Mike'Pomax'Kamermans It is how angular datatables manipulating the cell data l-lin.github.io/angular-datatables/#/bindAngularDirective — Tech Solvr
– Tech Solvr, Commented Oct 12, 2015 at 17:48
You bet. owasp.org is filled with lots of information on what not to do on the web if you want to offer a secure site, XSS in particular is covered as FAQ on owasp.org/index.php/… and in more detail on owasp.org/index.php/XSS. In this particular case, your code allows for stored XSS. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Oct 12, 2015 at 18:06

Icycool · Accepted Answer · 2015-10-12 17:59:53Z

1

You need to json your object so it become a string for you to concatenate.

return '<img src="'+data+'" ng-click=\'open1('+JSON.stringify(testData)+')\' />';

Edit: Not sure if this would work if your data contains some single quotes. You might have to escape them.

answered Oct 12, 2015 at 17:59

Icycool

7,1991 gold badge27 silver badges33 bronze badges

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

Comments

Tech Solvr · Accepted Answer · 2015-10-12 18:38:39Z

0

With special thanks to @Mike'Pomax'Kamermans I changed my data structure and now only using numbers, i.e data.id ..something like this -

function imageHtml(data, type, full, meta) {
    var dataId = parseInt(data.listId);
    return '<img src="'+data.ImageThumb+'" ng-click="open1('+dataId+')" />';
}

Feel free to correct me anytime.

answered Oct 12, 2015 at 18:38

Tech Solvr

5051 gold badge9 silver badges26 bronze badges

Collectives™ on Stack Overflow

Not able to pass object in a function Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related