CODEWITHSUNDEEP
jquery
Jitender
Jitender

Reputation: 7969

associate object with element using .data

I have to associate object with each ul which is created dynamically. I have used .data but it is giving undefined when try to retrieve. fiddle 

var file= [
                {
                    "name": "jhon",
                    "email": "manager",
                    "image": "images/profile-pic.png",
                    "data":{"name":"mile","depend":["amit","rajesh","deepak"]}
                },
                {
                    "name": "mile",
                    "email": "manager",
                    "image": "images/profile-pic.png",
                    "data":{"name":"mike","depend":["amit","rajesh","deepak"]}
                },
                {
                    "name": "steave",
                    "email": "manager",
                    "image": "images/profile-pic.png",
                    "data":{"name":"steave","depend":["amit","rajesh","deepak"]}
                }
]


	var html=""
	$.each(file,function(i,val){
		html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>"
		$(html).data('obj',val.data)		
	})
	
	$('#check').append(html)


$(function(){	
$('ul').click(function(){
	console.log($(this).data('obj'))
})

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="check"></div>

Upvotes: 0

Views: 78

Answers (1)

Puneet
Puneet

Reputation: 2051

Following lines are buggy in your code

  1. html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>" - This line of code is actually collecting all UL's (Names) in one variable.

  2. $(html).data('obj',val.data) - In this line, you are trying to set 'obj' data of each UL, but you are using 'html' variable that is a collection of ULs. It will work if you had only ONE UL, but as the loop proceeds, the HTML variable will contain more than one UL and the jQuery won't know for what element you want to set 'obj' data.

So now, to simplify, I changed these two lines to

  1. var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>"); - in this line, variable 'ul' will store the current UL created in the loop. So that we can use it in next line individually.
  2. ul.data('obj',val.data); - here we will set the Data 'obj' for the current created UL. That's it
  3. $('#check').append(ul); - Now, right after creating UL and setting its 'obj' data, we will add it in the page.

Minor change :

from 

var html=""
    $.each(file,function(i,val){
        html+= "<ul>"+"<li>"+val.name+"</li>"+"</ul>"
        $(html).data('obj',val.data)        
    })

    $('#check').append(html)

to

$.each(file,function(i,val){
            var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>");
            ul.data('obj',val.data);
            $('#check').append(ul);

        });


var file= [
                {
                    "name": "jhon",
                    "email": "manager",
                    "image": "images/profile-pic.png",
                    "data":{"name":"mile","depend":["amit","rajesh","deepak"]}
                },
                {
                    "name": "mile",
                    "email": "manager",
                    "image": "images/profile-pic.png",
                    "data":{"name":"mike","depend":["amit","rajesh","deepak"]}
                },
                {
                    "name": "steave",
                    "email": "manager",
                    "image": "images/profile-pic.png",
                    "data":{"name":"steave","depend":["amit","rajesh","deepak"]}
                }
]


	
	$.each(file,function(i,val){
		var ul= $("<ul>"+"<li>"+val.name+"</li>"+"</ul>");
        ul.data('obj',val.data);
        $('#check').append(ul);
		
	});
	
	


$(function(){	
$('ul').click(function(){
	console.log($(this).data('obj'))
})

})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="check"></div>

Upvotes: 5

Related Questions