loop through array in each()

Question

I have a backbone chat web app , i have a javascript array which holds names and other stuff, what i want is to look in this array if this.name() exists and if so read the element before the name wich is a image url and use that in option_h3 in the code below. hope im clear enough. thanks ia

var PeopleView = Backbone.View.extend({
className: 'peopleView',
initialize: function() {
  this.people = Hula.user.get("people");
  this.people.on('add', this.addPerson, this);
  this.people.on('remove', this.render, this);
  $(".nav_item").removeClass("nav_item_s");
  $("#people_nav").addClass("nav_item_s");
},
render: function(){
    this.$el.empty();
    var header = $('<div id="people_header">');
    var title = $('<div class="t34 title">');
    title.html("Friends");
    header.append(title); 
    this.$el.append(header);
    var addOption = $('<div id="people_add_option">');
    var addInput = '<div id="addp"><div id="people_add_input_h"><form id="add_person_input_form" ><input id="add_person_input" name="s" type="text" value="Enter Hularing ID..." ></input></form></div></div>';
    addOption.html(addInput);
    this.$el.append(addOption);
    var list = $('<div id="people_list" >');
    this.$el.append(list);
    this.people.each(this.addPerson, this);
    return this;
},
addPerson: function(person){
    var view = new PeopleViewPerson({model: person});
    this.$("#people_list").prepend(view.render().$el);
},
events: {
    'keypress #add_person_input': 'addNewPerson',
},
addNewPerson: function(e){
    var ID = $('#add_person_input').val();
    if(ID !=="Enter Hularing ID..."){
        if(e.which == 13) {
            if(validate(ID)){
                Hula.subscribe(ID);
                 this.$('#add_person_input').val("")
                 $("#add_person_input_form")[0].reset();
                $('#add_person_input').blur().focus();                   
                e.preventDefault();
            }
        }
    }
}
});

var PeopleViewPerson = Backbone.View.extend({
className: 'friend_holder',
initialize: function() {
    $(this.el).attr('id', jid_to_id(this.model.get("jid")));
    this.model.on('all', this.render, this);
    this.model.get('conversation').get('messages').on('add', this.onNewMessage, this);
},
render: function() {
    var img = $('<div class="friend_img_h">');
    if(this.pic() == null){
        img.html('<img src="farax/img/default.png" />');
    } else {
        var img_src = 'data:'+this.picType()+';base64,'+this.pic();
        img.html('<img src="'+img_src+'" />')
    } 
    var info_h = $('<div class="friend_info_h">');
    var person_name = $('<div class="friend_name">');
    person_name.html(this.name());
    var line2 = $('<div class="friend_line2">');
    var status = this.status();
    line2.html(status);
    var option_h = $('<div class="friend_option_h">');
    option_h.html('<div class="msg_person_icon" ></div>');
    // CONTACT INFO DIV.
    var option_h1 = $('<div class="friend_option_h1">');
    // CONTACT INFO IMAGE IN CSS FILE.
    option_h1.html('<div class="msg_person_icon1"></div>');
    // CONTACT FACEBOOK TIJDLIJN.
    var option_h2 = $('<div class="friend_option_h2">');
    // CONTACT FACEBOOK TIJDLIJN IMAGE IN CSS FILE.
    option_h2.html('<div class="msg_person_icon2"></div>');
    var option_h3 = $('<div class="friend_option_h3">');
    option_h3.html('<div class="msg_person_icon3"></div>');

    for(var t = 0; t < javaScript_array.length; t++) {
      // this one stays the same
      var naam = this.name();

      var res = javaScript_array[t];
      // ignore this it is done to get the name from the database the same as in the collection
      var naam1 = naam.replace(" ","0");
      // see if it exists
      if(naam1 === res){
              option_h3.append('<div class="msg_person_icon3"><img src="'+ javaScript_array[t-1] +'" width="35" height="35"/></div>');

      } else {
              option_h3.html('<div class="msg_person_icon3"></div>');

      }
     }
            if(this.ask()== "subscribe"){
        line2.prepend('<span class="pending_out">Request pending.</span>');
    }
    if(this.pending()){
        line2.prepend('<span class="pending_in">Pending authorisation!</span>');
    }
    info_h.append(person_name).append(line2);
    this.$el.html(img);
    this.$el.append(info_h);
    this.$el.append(option_h);      
    this.$el.append(option_h1);             
    this.$el.append(option_h2);             
    this.$el.append(option_h3);             
    return this;
},
jid:        function() { return this.model.get('jid');},
name: function() { return this.model.get('name'); },
status: function() { return this.model.get('status'); },
pic: function() { return this.model.get('picture').pic; },
picType: function() { return this.model.get('picture').picType; },
ask: function() { return this.model.get('ask'); },
subscription: function() { return this.model.get('subscription'); },
pending: function() { return this.model.get('pending'); },
online: function() { return this.model.get('online'); },
events: {
    'click .friend_img_h': 'loadPerson',
    'click .friend_info_h': 'loadPerson', 
    'click .msg_person_icon': 'messagePerson' 
},
loadPerson: function(){ 
    Hula.screen.person.render(this.model);
},
messagePerson: function(){
    Hula.screen.conversation.render(this.model);
},
onAll: function(person){
},
onNewMessage: function(message){
    $('#people_list #'+jid_to_id(this.jid())+' .friend_line2').html(message.get("message"));
},
OnStatusChange: function(change){
    $("#people_list #"+id_to_jid(this.ji())).html(this.status().toString());
}    

});

it only works on the last element in the array while there are three elements.

Answer 1

I'm looking at your code and to be completely honest, it makes absolutely no sense to me. I can see that you have option1 option2 and option3 which I assume are the 3 elements you are referring to only, in your array at the bottom, you only ever seem to change option 3.