How do I loop through an array of arrays?

JavaScript
1

HOW DO I LOOP THROUGH AN ARRAY OF ARRAYS and do something based on a match? I want to:

  1. search each array at a particular index[position] to see if it matches the term inserted into localStorage,
    2. when match is found, pop() the matching index[7] entry (which is “hide”),
    3. then push(“show”) to the same array, effectively replacing the popped entry (turning it to “show”).

Once that is over, I loop through the arrays again to:

  1. find each array with index[7] containing “show,”
    2. grab the name of the model in index[0] and its page URL in index[2],
    3. output the results in a div for the user, making the model name clickable.

In effect, the buttons filter the list of models and only display the ones having “show.”
After this, new buttons appear to show new criteria to filter it further, this time changing “show” to “hide” to filter them out.

PROBLEM:
Console.log keeps showing all the elements of the array instead of the specific indexes I am looking for.
So my looping script is wrong, and I don’t know how to put it right. That is where I need help.
There are no more errors in Chrome Tools as of this posting. Console is dutifully outputting the results of my code.

Here is the array of arrays:

    < script>
    var model = [
    ["Car1", "thumb_url", "page_url", "kit", "elect", "truck", "1:10", "hide"],
    ["Car2", "thumb_url", "page_url", "kit", "elect", "buggy", "1:10", "hide"],
    ["Car3", "thumb_url", "page_url", "rtr", "elect", "truck", "1:10", "hide"],
    ["Car4", "thumb_url", "page_url", "rtr", "elect", "truck", "1:10", "hide"],
    ["Car5", "thumb_url", "page_url", "rtr", "elect", "truck", "1:10", "hide"],
    ["Car6", "thumb_url", "page_url", "kit", "elect", "buggy", "1:8", "hide"],
    ["Car7", "thumb_url", "page_url", "kit", "nitro", "buggy", "1:8", "hide"],
    ["Car8", "thumb_url", "page_url", "kit", "elect", "truck", "1:8", "hide"],
    ["Car9", "thumb_url", "page_url", "kit", "nitro", "truck", "1:8", "hide"],
    ["Car10", "thumb_url", "page_url", "rtr", "elect", "buggy", "1:10", "hide"],
    ["Car11", "thumb_url", "page_url", "rtr", "elect", "buggy", "1:18", "hide"],
    ["Car12", "thumb_url", "page_url", "rtr", "elect", "truck", "1:18", "hide"]
    ];
    < /script>

SEQUENCE OF PAGE:

  1. Two buttons call functions that correctly put their value of rtr or kit into localStorage (console.log confirms this works).
  2. Then they call the looping section, looking in index[3] for a match. Intent of the code is to display only those models that match the button selection.
  3. So if button for “kit” was selected, then we’ll see Car1, Car2, and Car6-Car9 listed in the div.

Here is the looping section:

    < script>
    function getList(){

    [ SNIPPED - code to create the div for output goes here ]

	// from http://www.dyn-web.com/javascript/arrays/multidimensional.php
	// look for "results" match (kit or rtr) and change "hide" to "show" where matched
	for (var i=0, len=model.length; i" + model[i][0] + ""); 
                            document.getElementById("carlist").appendChild(modList);
                            // document.getElementById("carList").innerHTML += "" + model[i][0] + ""; // list model name
			}
		}
	}
    } 
    < /script>

Where am I going wrong in my matching/displaying code?

2

your second code is completely broken. and it does’t show any matching.

3

… and the reason is?

Thanks!

4

This line looks totally bogus - is it a copy/paste error?. I would have expected to see something like this:

for (var i=0; i < model.length; i++) {
   if (model[i][3] == "car") {
       \\ display code goes here
   }
}
5

I will experiment with your suggestion. Thanks!

6

I see that some of the code was screwed up when inserting on this page because a < will wipe out any immediately following text. I added a space after each < and they show fine now.

Thanks to your snippet of code, I was able to get this to return NEARLY correct console output - it only outputs the first of the list. However, it won’t write it into the div. Here’s what I have for the second part of the script:

// look for "show" match and list matching vehicle's name
for (var i=0, len=model.length; i < len; i++) {
	// inner loop applies to sub-arrays
	for (var i=0; i < model.length; i++) {
		if ( model[i][3] === results && model[i][7] === "show") {
                            console.log("list " + model[i][0] + " - " + model[i][3]); 
                            var modList = document.createTextNode("< li>< a href='" + model[i][2] + "'>" + model[i][0] + "< /a>< /li>"); 
                            document.getElementById("carList").appendChild(modList);
		}
	}
}

}
How do I write the results into the carList div?
Later: Looks like I need to do a full creatElement to make this work…

7

something else to look at… you’ve got a check for model[i][7] == “show”

Unless you were just giving us test data, everything in your array is set to hide

8

Everything in the data should be set to “hide” at first. Then when the button is pressed, what is chosen will be set to “show” and displayed, taking the rest off the table, so to speak.

Thereafter, succeeding buttons will pop off the show and push hide, whittling down the list until the array is finished.

Make sense?

9

Hi there StevenHu,

How do I loop through an array of arrays?

I have not looked at the rest of your problems, but this works for the first…

[code]

untitled document
[/code]

coothead

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.