Accessing an element in an array within an array in JavaScript

Question

Pastebin of index.html: http://pastebin.com/g8WpX6Wn (this works but with some broken img links & no css).

Zip file if you want to see whole project:

I'm trying to dynamically change the contents of a div when I click an image. The image has it's respective id (the first index in the inner array) within the first inner array there's another array (index 3). I want to populate my div (id="articleLinks") with those links using JQuery when the image is clicked.

JavaScript & JQuery:

The tube array. *Note: the first index of each element in tubeArray is the ID & the news articles aren't linked to anything particular. Only interested in tubeArray[0] & tubeArray[4]

 var tubeArray = [
            ['UQ', -27.495134, 153.013502, "http://www.youtube.com/embed/uZ2SWWDt8Wg",  
                [
                ["example.com", "Brisbane students protest university fee hikes"],
                ["example.com", "Angry protests over UQ student union election"],
                ]
            ],
            ['New York', 40.715520, -74.002036, "http://www.youtube.com/embed/JG0wmXyi-Mw",
                [
                ["example.com" , "NY taxpayers’ risky Wall Street bet: Why the comptroller race matters"]
                ]
            ],
            ['To The Skies', 47.09399, 15.40548, "http://www.youtube.com/embed/tfEjTgUmeWw", 
                [
                ["example.com","Battle for Kobane intensifies as Islamic State uses car bombs, Syrian fighters execute captives"],
                ["example.com","Jihadists take heavy losses in battle for Syria's Kobane"]
                ]
            ],
            ['Fallujah', 33.101509, 44.047308, "http://www.youtube.com/embed/V2EOMzZsTrE", 
                [
                ["example.com","Video captures family cat saving California boy from dog attack"],
                ["example.com","Fines of £20,000 for dogs that chase the postman"]
                ]
            ]
        ];

A for loop which goes through each element in tubeArray then assigns id to the first index. Also an image that calls the function myFunctionId which takes the parameter this.id.

for (i = 0; i < tubeArray.length; i++) {
    var id = tubeArray[i][0];

    //other code

    '<img src="img.png" onclick="myFunctionId(this.id);" id="' + id + '">' +

    //other code
}

function myFunctionId (id) {
        journal = id; 
        alert(journal) //just a test

        //I want to search through tubeArray with the id and find the matching inner array. 

        //I then want to loop through the innerArray and append to my html a link using JQuery.
        for (j = 0; i < innerArray.length; j++){
            //supposed to get "www.linkX.com"
            var $link = ;
            //supposed to get "titleX"
            var $title = ; 

            //change the content of <div id="articleLinks">
            $('#articleLinks').append('<a href=$link>$title</a><br>');
       }
}

HTML:

<div id="articleLinks">
    <a href="http:/www.google.com">Example Link</a><br>
</div>

Any help would be greatly appreciated. I've tried to simplify & cut out as much as I can so it's readable.

Answer 1

probably this might help: make yourself a map like

var tubeArray = [
   [                                  // tubeArray[0]
     'id',                            // tubeArray[0][0]
     int,                             // tubeArray[0][1]
     int,                             // tubeArray[0][2]
     [                                // tubeArray[0][3]
        [                             // tubeArray[0][3][0]
           "www.link1.com",           // tubeArray[0][3][0][0]
           "title1"                   // tubeArray[0][3][0][1]
        ],  
        [                             // tubeArray[0][3][1]
            "www.link2.com",          // tubeArray[0][3][1][0]
            "title2"                  // tubeArray[0][3][1][1]
        ]
     ]
   ],

etc. don't know whether this helps, but four dimensional arrays are brain-breaking ....

[edit]

... and thus go for a more OO like approach:

var tubeArray = [
    'id' : {                          // tubeArray[id] or tubeArray.id
     'a': int,                        // tubeArray.id.a
     'b': int,                        // tubeArray.id.b
     'entries': [                     // tubeArray.id.entries
        {                             // tubeArray.id.entries[0]
          'url': "www.link1.com",     // tubeArray.id.entries[0].url
          'title': "title1"           
        },  
        {                             // tubeArray.id.entries[1]
            'url': "www.link2.com",   // tubeArray.id.entries[1].url
            'title': "title2"         ...
        }
     ]
  ] ,

Answer 2

First you need to loop over tubeArray then go 4 deep and loop over the Array of Arrays at that level. Of course, you loop over those inner Arrays and get Elements 0 and 1.

$.each(tubeArray, function(z, o){
  $.each(o[4], function(i, a){
    $.each(a, function(n, v){
      $('#articleLinks').append("<a href='"+v[0]+"'>"+v[1]+'</a>'); // use CSS to break lines
    });
  });
}