Printing array array to selected object

Question

I have an object that has multiple items which, have an array array of values. I also have a page which has a series of div elements which allows a user to click on them and show the array array associated with the div they clicked. However, this is not happening, when I click on the div, which houses the object item, I'm getting nothing but undefined logs. Can anyone explain to me what I'm doing wrong?

var Alerts = {
    apu: [["APU Power Fail", "APU[1]"], ["APU Power Fault", "APU[2]"], ["APU Generator Fail", "APU[3]"], ["APU High Oil Temperature", "APU[4]"], ["APU Hot Start", "APU[5]"], ["APU Loss Overspeed Protection", "APU[6]"], ["APU Starter Engaged", "APU[7]"], ["APU Fire", "APU[8]"], ["APU Fails Bite Check", "APU[9]"], ["APU Door Fails to Open", "APU[10]"], ["APU No Flame", "APU[11]"], ["Left Fire Bottle Discharge", "APU[12]"]],

    avionics: [["ADS 1 Fail", "AVIONICS[1]"], ["ADS 2 Fail", "AVIONICS[2]"], ["ADS 3 Fail", "AVIONICS[3]"], ["AP 1 Fail", "AVIONICS[4]"], ["AP 2 Fail", "AVIONICS[5]"], ["Autopilots Fail", "AVIONICS[6]"], ["Baroset 1 Fail", "AVIONICS[7]"], ["Baroset 2 Fail", "AVIONICS[8]"], ["Baroset 3 Fail", "AVIONICS[9]"], ["CCD 1 Fail", "AVIONICS[10]"], ["CCD  2 Fail", "AVIONICS[11]"], ["Heading Comparison Monitor", "AVIONICS[12]"], ["Heading and Roll Comparison Monitor", "AVIONICS[13]"], ["Display Controller 1 Fail", "AVIONICS[14]"], ["Display Controller 2 Fail", "AVIONICS[15]"], ["IRS 1 Fail", "AVIONICS[16]"], ["IRS 2 Fail", "AVIONICS[17]"], ["IRS 3 Fail", "AVIONICS[18]"], ["Glideslope Antenna Fail", "AVIONICS[19]"], ["MAU 1A Fail", "AVIONICS[20]"], ["MAU 1B Fail", "AVIONICS[21]"], ["MAU 2A Fail", "AVIONICS[22]"], ["MAU 2B Fail", "AVIONICS[23]"], ["MAU 3A Fail", "AVIONICS[24]"], ["MAU 3B Fail", "AVIONICS[25]"], ["MRC 1 Fail", "AVIONICS[26]"], ["MRC 2 Fail", "AVIONICS[27]"], ["GPS Degrade", "AVIONICS[28]"], ["GPS #1 Fail", "AVIONICS[28]"], ["GPS #2 Fail", "AVIONICS[30]"], ["Display Unit 1 Fail", "AVIONICS[31]"], ["Display Unit 2 Fail", "AVIONICS[32]"], ["Display Unit 3 Fail", "AVIONICS[33]"], ["Display Unit 4 Fail", "AVIONICS[34]"], ["GPS - Unable RNP", "AVIONICS[35]"]]
}
for(var array in Alerts){
    var system = array.toUpperCase();
    $("#form_emergencies").append("<div class='systems' id='" +array +"'><div class='select_box'></div><h2> " +system +"</h2></div>");

    $(".systems").on("click", function(){
        $.each(Alerts[array], function(ind,item){
            console.log(Alerts[array].item);
        })
    })
}

enter image description here

I've got the habit of creating my objects with capitol letters, but that's not why my script is not working. — user3542456
– user3542456, Commented Nov 2, 2014 at 14:02

plalx · Accepted Answer · 2014-11-02 14:21:05Z

1

Your choice of variable names is quite confusing.

Let's start with for(var array in Alerts), in this statement array is not actually an array, it's simply refers to the key, which in turns is a system in your domain, therefore I would change array to systemKey.

Then, you go on and attach handlers inside the loop. This code is problematic because the second system will end up having two click handlers attached.

for(var systemKey in Alerts){
    var system = systemKey.toUpperCase();
    $("#form_emergencies").append("<div class='systems' id='" +systemKey +"'><div class='select_box'></div><h2> " +system +"</h2></div>");
}

//Notice I used this.id rather than array
$(".systems").on("click", function(){
    $.each(Alerts[this.id], function(ind,item){
        //...
    })
})

Finally, console.log(Alerts[array].item); is wrong, just put console.log(item);

answered Nov 2, 2014 at 14:21

plalx

43.8k7 gold badges77 silver badges94 bronze badges

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

3 Comments

user3542456 Over a year ago

Awesome, thanks very much. Also, did you use $.each(Alerts[this.id], function(ind,item) to find the value of the id of the clicked div?

plalx Over a year ago

@Robert Yes, since this refers to the clicked .system div element. I would use a data attribute like data-system-key rather than id btw. It's more expressive and less limitating. You rarely want an id attribute on dynamically generated DOM elements.

user3542456 Over a year ago

would using data-id and then in the click event doing `variable = $(this).data("id"); then iterating on the variable work?

Asik · Accepted Answer · 2014-11-02 14:19:52Z

0

Try this. working demo

for(var array in Alerts){
    var system = array.toUpperCase();
    $("#form_emergencies").append("<div class='systems' id='" +array +"'><div class='select_box'></div><h2> " +system +"</h2></div>");    
}


$(".systems").on("click", function(){
     var keyVal = $(this).attr("id");
     $.each(Alerts[keyVal], function(ind,item){
         $.each(item, function(ind2,item2){
               console.log(Alerts[keyVal][ind][ind2]);
         });
    })
});

answered Nov 2, 2014 at 14:19

Asik

7,9674 gold badges30 silver badges35 bronze badges

Collectives™ on Stack Overflow

Printing array array to selected object

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related