Search array for string - returning -1

Question

I've been reading lots of StackOverflow answers which tell me that, in Javascript, the best way to search an array for a particular string is use indexOf(). I have been trying to make this work for a while now, and I need some help with it.

I am making a shop in a text-adventure game. These are the values I am using:

The array shopCosts:

shopCosts = [20, 25];

The array shopItems:

shopItems = [["Sword", "Shield"]];

I dynamically create radiobuttons by looping through shopItems:

for(var i = 0; i < array.length; i++)
{
    // Create the list item:
    var item = document.createElement('li');

    // Set its contents:
    item.appendChild(document.createTextNode(array[i] + " - " + shopCosts[i] + " Gold"));

    // Add it to the list:
    list.appendChild(item);

    var label = document.createElement("label");
    var radio = document.createElement("input");
    var text = document.createTextNode(array[i]);
    radio.type = "radio";
    radio.name = "shop";
    radio.value = array[i];
    radio.onclick = function () { addValue(this.getAttribute("value"), shopCosts, shopItems) }

    label.appendChild(radio);
    label.appendChild(text);
    document.body.appendChild(label); 
}

This is the part in question:

radio.onclick = function () { addValue(this.getAttribute("value"), shopCosts, shopItems) }

My logic was basically to assign values to each dynamically created radiobutton, and if one was pressed, get the value (so, the name of the item you wanted to buy) and then search shopItems for that particular string for the index value. Once I had that, I would look in the same "parallel" list shopCosts to find the price.

I used console.log() to see what variables were in play. When I clicked on the radio button, this function is called:

function addValue(nameOfItem, shopCosts, shopItems)
{
    var positionOfShopItem = shopItems.indexOf(nameOfItem);
    console.log(positionOfShopItem);
    console..log(nameOfItem);
    console.log(shopItems);
}

Surely, the console.log() would return the position of the named item? To prove to myself I'm not going crazy, here's what the Dev Tools say:

-1
Sword
    [Array[2]]
        0: "Sword"
        1: "Shield"

Sword is clearly in the array, in position 0, so why is indexOf() returning -1?

Any help appreciated!

Answer 1

As I alluded to in my comment, its because shopItems does not contain an array of strings, it contains a single element, where that one element is an array of strings. I suspect your code would work just fine if you removed the extra square braces

var shopItems = ["Sword", "Shield"];