How to pass iterating json object in jquery to javascript function

Question

In Ajax call populating data dynamically in html page.

Requirement : After populating if we click on button it should invoke JavaScript function along with required to pass object. In JavaScript we need to access data using like value.id, value.title, value.description..... (Expected result) But i am unable to fetch data from function argument, i tried with stringify, parse methods but didn't.

Please tell me, how can i access in JavaScript function?

success : function(data) {
 var listData = null;
 $.each(data.documentsList,function(index, value) { 
   //some logic ----------(iam able to get value.id, value.title, value.description...)
   listData += '<button value="Update" onclick="updateDocument(\''+ value + '\')">Update</button>'
   //some logic ----------
  });//each loop end
 $('#list').html(listData);
 },//success end

function updateDocument(document) {
    console.log("updateDocument" + document);  //[object object]
    console.log(document.title); //undefined
}

You should use event delegation using .on() for your dynamic buttons. — ScanQR
– ScanQR, Commented Nov 29, 2016 at 9:37

Robba · Accepted Answer · 2016-11-29 09:38:05Z

1

I would recommend not hooking up the event handler as a string but instead to the actual button object:

success : function(data) {
 $('#list').clear();
 $.each(data.documentsList,function(index, value) { 
   //some logic ----------(iam able to get value.id, value.title, value.description...)
   var button = $('<button type="button">Update</button>');
   button.on('click', function() {
       updateDocument(value);
   });
   $('#list').append(button);
   //some logic ----------
  });//each loop end
 },//success end

function updateDocument(document) {
    console.log("updateDocument" + document);  //[object object]
    console.log(document.title); //undefined
}

answered Nov 29, 2016 at 9:38

Robba

8,46413 gold badges52 silver badges80 bronze badges

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

Comments

ScanQR · Accepted Answer · 2016-11-29 09:56:57Z

0

For each dynamically added elements you should use .on() which binds events to dynamically added elements if matched with defined selector.

success : function(data) {

 $.each(data.documentsList,function(index, value) { 

   var button = $('<button type="button">Update</button>');
   button.on('click', function() {
       console.log("updateDocument" + value);
   });

   //append dynamically added element to list
   $('#list').append(button);

  });//each loop end
 },//success end

edited Nov 29, 2016 at 9:56

answered Nov 29, 2016 at 9:47

ScanQR

3,8202 gold badges16 silver badges34 bronze badges

Comments

Deepak Dixit · Accepted Answer · 2016-11-29 09:57:25Z

0

First check that your function updateDocument() is reachable or not , you can place a normal console.log inside function and after that you can inspect that where is the actual point of problem . Also change the name of parameter from document to something else .

function updateDocument(res_doc) {
   console.log("updateDocument",  res_doc); // right way to print object 
   console.log("updateDocument " + res_doc); // wrong way to print object 
}

and if you are unable to call the function then you need to add event listener in different way to bind events to dynamically created element using .on() . You can check this link http://api.jquery.com/on/ for examles if required.

answered Nov 29, 2016 at 9:57

Deepak Dixit

1,6201 gold badge17 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to pass iterating json object in jquery to javascript function

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related