SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Array Key While Using jQuery Each Function

    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>');
    });

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Is your val.users an object of users or is it an array of objects?

    If it's an array of objects it is most definitely better to use a for loop that it would be to use jQuery.each() as the latter is a lot slower than the former (in fact, jQuery.each() should ideally only be used to loop over jQuery / DOM objects, where it is faster).

    If it is an object with objects, .each() is a nice shortcut, but a for..in loop might be better and faster.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Zealot
    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I was actually able to get this working by making it into a function. The problem was that I was using push without running the whole loop. I agree with you too, I probably should use a for loop for the sake of speed. I wonder how much faster it actually is though.

  4. #4
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    "For in" iterates over EVERYTHING - including the methods. Do not use it without keeping that in mind. This becomes especially troublesome with the prototype.js framework since, as it's name implies, it modifies the prototype of several major javascript objects. If you use prototype you pretty much commit to not using for .. in; and if you use for .. in you're committing to not using prototype. That shouldn't be an issue here since jQuery is the framework in place, but it is still important to keep in mind exactly what for...in does cause even if jQuery is your framework of choice you'll eventually be called upon to maintain a prototype frameworked site and if you use for...in there you're in for a world of hurt.

  5. #5
    SitePoint Addict sdleihssirhc's Avatar
    Join Date
    Feb 2009
    Posts
    387
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    "For in" iterates over EVERYTHING - including the methods. Do not use it without keeping that in mind. This becomes especially troublesome with the prototype.js framework since, as it's name implies, it modifies the prototype of several major javascript objects. If you use prototype you pretty much commit to not using for .. in; and if you use for .. in you're committing to not using prototype. That shouldn't be an issue here since jQuery is the framework in place, but it is still important to keep in mind exactly what for...in does cause even if jQuery is your framework of choice you'll eventually be called upon to maintain a prototype frameworked site and if you use for...in there you're in for a world of hurt.
    Isn't that what hasOwnProperty is for? From Douglas Crockford:

    Be aware that members that are added to the prototype of the object will be included in the enumeration. It is wise to program defensively by using the hasOwnProperty method to distinguish the true members of the object
    Code JavaScript:
    for (x in obj) {
        if (obj.hasOwnProperty(x)) {
            // ...
        }
    }
    Last edited by sdleihssirhc; Jan 31, 2012 at 16:30. Reason: forgot the link
    I'm the web overlord for Graphic Business Systems

  6. #6
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Yes, of course. typeof(x) == 'function' also works.

    I'm not saying not to use for...in - I'm saying to be aware of what it does. It is not an iteration over object members. It is an iteration over everything, and if you don't prepare for that things will get ugly fast.

  7. #7
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Michael Morris View Post
    things will get ugly fast.
    It's cool, this is JavaScript.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  8. #8
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Could be worse. Could be PHP (I'm usually over there, I don't drop by the Javascript corner of the site as often as I should).

  9. #9
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Hah, I think we should have a competition to see which of the two languages is uglier.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  10. #10
    I solve practical problems. bronze trophy
    Michael Morris's Avatar
    Join Date
    Jan 2008
    Location
    Knoxville TN
    Posts
    2,053
    Mentioned
    66 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    PHP hands down. It has THREE iteration operators: " -> ", " :: ", and " \ " for namespaces to JavaScript's 1 ".". In variants of EMCA that have namespaces (Actionscript 3) namespaces are resolved with a . as well. And don't get me started with the function libraries schizophrenic naming pattern. I love both languages and consider myself a master of both, but I'm painfully aware of each's shortcomings. JavaScript has more bad code floating around, but that isn't a fault of the language.

  11. #11
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    http://wtfjs.com/
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •