How can I get an object value in my array...?

Question

Sorry that my array is long but it is fairly simple. How can I access an object of this array?

For example some parts of my array (which is used to construct a grid) have the letter "P" assigned to them. How can I access that if I wanted to remove that letter "P" (so set the letter equal to "") in an If statement? E.G

If (someVar == thisVar) { // some way to set a certain letter to "" }

The array:

var map = [
 [
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: "P"
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 }],
 [ {
 color: "g",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 }
 ],
 [ {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: "P"
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 }
 ],
 //SEPERATION
 [ {
 color: "w",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: "B"
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 }
 ],
 // SEPERATION
 [ {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 }
 ],
 // SEPERATION
 [ {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 }
 ],
 // SEPERATION
 [ {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: "P"
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: "P"
 }
 ],
 // SEPERATION
 [ {
 color: "g",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 }
 ],
 // SEPERATION
 [ {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 }
 ],
 // SEPERATION
 [ {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "g",
 letter: ""
 },
 {
 color: "w",
 letter: ""
 },
 {
 color: "b",
 letter: ""
 }
 ]
];

• halfer: This looks like an array of an array of objects. I expect it would be something like map[0][1].color. Have you tried anything?
• Zach Saucier: possible duplicate of jQuery find and replace with key value arrays

Answer 1

You have an array containing arrays containing objects. So you index into the first array to get the subarray you want, then you index into that to get the object. E.g.:

var obj = map[0][0];
console.log(obj.color); // "g"

That gets the first subarray, and the first object in it. [0][1] gets the first subarray's second object, and so on. [1][0] gets the second subarray's first object. Etc.

How can I access that if I wanted to remove that letter "P" (so set the letter equal to "") in an If statement?

It's if, not If, in JavaScript.

To do that, first you have to find the subarray and entry containing that letter, which means looping. Having found the subarray and the index of the object with letter: "p", you'd either modify that object (removing the letter property, setting it to something else, etc.), or use Array#splice on the subarray to remove that object from it entirely.

• T.J. Crowder: @Shef: Yes, or map[0][0].color. I was showing how to get the object.

Answer 2

Let me answer this by explaining how I would work out how to access elements here. Start off with trying to output the map:

alert(map);

This will tell you that it is an array. Alright, so let's examine the zeroth element in that array. We choose zero since we know that arrays generally start their indexes from that number:

alert(map[0]);

That in itself is an array, so let's try treating that as an array too, using the same principle:

alert(map[0][0]);

Aha! That will tell us it is an object, so we can now try accessing some properties:

alert(map[0][0].color);

Give all of those a go, and you'll have some basic techniques under your belt for analysing this sort of question generally.

If you find that something returns "undefined" then you've probably taken a wrong turn, and need to try something else - either you've misunderstood the structure, one of your object properties is incorrectly named, or you've chosen an index value that is out of range.

Another way you could tackle the problem is to see the outer delimiters in the definition are thus:

[ ... ]

The square brackets are a good sign that the contents are an array - in your case this goes for the first two levels. The third level is delineated thus:

{ ... }

This is a sign that the contents is an object.

• user3481788: Thank you, I see now! So to access the letter p on the first line I would do; alert(map[0][2].letter); :) How would I then remove it? Would I do map[0][2].letter = "";?
• halfer: Yes, that looks about right! Of course, try it to see if that is correct for your data structure. To remove an element, see here.
• halfer: Pleased that worked for you. I've added another way to debug this sort of problem generally, which may be useful in the future.

Answer 3

You have an array of arrays containing objects as elements. First traverse the outer array, then the inner array and replace the letters as you find them. jsfiddle here. You will notice that the first run will set the values to empty string, so the second run will not find any with letter P.

var replaced = 0;
for(var i = 0; i < map.length; i++)
{
 var subMap = map[i];
 for( var j = 0; j < subMap.length; j++ )
 {
 if(subMap[j].letter == "P")
 {
 subMap[j].letter = "";
 console.debug('replaced P with empty string');
 replaced++;
 }
 }
}

• halfer: That won't remove an element exactly - you need to use array.splice or delete. However, of course this may be sufficient in some use cases!
• acarlon: @halfer - he didn't ask to remove the elements, just replace with ""
• halfer: You're quite right - I am clearly too tired to be advising on Stack Overflow ;-) (though the OP commented on my answer and used the word "remove"). Nevertheless, +1.
• acarlon: @halfer - No worries. I like your answer