I am trying to loop through my array by using the key value from the .each function, but I don't know how to do it. I essentially want to do value['key']['firstname'], but I don't know the syntax.

The problem is that right now this function is not looping through my arrays. Each user has its own array object.

Code JavaScript:
$.each(val.users, function(key, value){
 items.push('<a title="' + value.firstname + value.lastname + '" href="/u/' + value.username + '"><img title="' + value.firstname + value.lastname + '" alt="' + value.firstname + value.lastname + '" class="avatar extrasmall bws" src="' + value.avatar + '"></a>');
});


Perhaps a better way to explain my issue is that all of the users objects aren't being added to the HTML. I double checked and the users are being loop through, but only the first one is being added. Here is the full code.

Code JavaScript:
$.each(conversations, function(key, val){
 
	if(val.read == 0){
		var highlight =' hl'
	}else{
		var highlight =''
	}
 
	items.push('<div class="pm-conv'+ highlight +'"><label for="pm-cb-' + val.id + '" class="pm-cb-label"><input type="checkbox" id="pm-cb-' + val.id + '" name="pm-cb[' + val.id + ']"></label><div class="pm-users">');
 
	$.each(val.users, function(key, value){
		console.log(value.firstname);
		items.push('<a title="' + value.firstname + value.lastname + '" href="/u/' + value.username + '"><img title="' + value.firstname + value.lastname + '" alt="' + value.firstname + value.lastname + '" class="avatar extrasmall bws" src="' + value.avatar + '"></a>');
	});
 
	items.push('</div><div class="subject"><span class="pm-conv-info"><span>' + val.replies + ' replies</span><span>' + val.last_message + '</span></span><a class="subject-link" href="messaging?action=read&amp;cid=' + val.id + '">' + val.subject + '</a></div><div class="pm-conv-delete"><a href="messaging?action=delete&amp;cid=' + val.id + '" id="delete_message_' + val.id + '"><img title="Delete" alt="Delete" src="/assets/img/icons/close_grey_rounded_dark.png"></a></div></div>');
});