I know value is in an array, yet indexOf says it isn't....help!

1

Here’s a link to the github for my project, in case the snippet I’ll post in a sec doesn’t give enough info:
Stamp Inventory Github Link

Ok, so I’m getting data from a Google spreadsheet and displaying it in my html page. Works great. As I go through each name/value pair, I add it to an array called stamps. I’m console logging the array at the end and it contains all the values. Seems good.

So then, when I submit one of my forms to update the values, I’m getting the values from the form just fine. All console logging seems to look right. But I go to find the index of each name in stamps…and it keeps returning -1. So somehow, it’s not seeing it! No idea why. The spelling is the same, capitalization is the same, I even tried trimming both values before adding/searching in case there was extra white space on the ends…nothing. It doesn’t see it.

I’m at my wits end. I’m obviously missing something, but…I don’t know what. This problem shows up both on my localhost and my cloud9 workspace, using the same code. I’m using Chrome both times. I mean, maybe it’s Chrome for some odd reason? Though I just tried it in Firefox, and it’s having the same problem. I don’t know. Someone please help if you can. Here’s a snippet that involves the code in question (the stamps array is a global declared at the very beginning, not shown below, just a blank array):

function getData() {
gapi.client.sheets.spreadsheets.values.get({
    spreadsheetId: '1qnHMLUQRRWyQMMLWDyuKfRHcGVWMJzhNkorTnmzSbjk',
    range: 'forSite!A2:B14',
}).then(function (response) {
    var range = response.result;
    if (range.values.length > 0) {
        for (var i = 0; i < range.values.length; i++) {
            var name = range.values[i][0];
                var qty = range.values[i][1];
                document.getElementById(name).innerHTML = qty;
                stamps.push( [name , qty ] );
        }
    }
    console.log("Starting array: " + stamps);
}, function (response) {
    console.log('Error: ' + response.result.error.message);
    });
}

$("#addUsed").submit(function (event) {
event.preventDefault();
var values = $(this).serializeArray();
console.log(values);
for (var a = 0; a <= counter; a++) {
    var name = values[a].value;
    var qtyused = values[a + 1].value;
    var spot = stamps.indexOf(name);

    console.log(name, qtyused, spot);
}
});
2

Looks to me that you’re pushing an array onto stamps, not a single value. But then you’re trying to use .indexOf() on stamps to look for a name.

As an array of arrays, stamps.indexOf() will never return > -1 when testing for a string value.

Perhaps stamps.filter() or stamps.some() would be more useful.

~Micheal

3

Thanks Micheal! This got me rolling on a change…

So I used .findIndex() and .includes and my code is now seeing all of my variables by name…except for the very first item in the array. For some reason, it refuses to see whatever’s at index 0. Any thoughts? Here’s the updated function (parts commented out are only so I can see the final console.log for debugging):

$("#addUsed").submit(function (event) {
event.preventDefault();
var values = $(this).serializeArray();
console.log(values);
for (var a = 0; a <= counter; a++) {
    var name = values[a].value;
    var qtyused = values[a + 1].value;
    var spot = stamps.findIndex(function(ele, idx) {
        if (ele.includes(name, 0)) {
            return idx;
        }
    });
    //var curr = stamps[spot];
    //console.log(curr);
    //var num = curr[1] - qtyused;
    //console.log(num);
    //stamps.splice(spot, 1, [name, num]);
    //console.log(stamps);
    console.log(name, qtyused, spot, stamps[spot]);
}

});

4

The function you pass to findIndex needs to return something truthy or something falsy. A truthy value indicates that that element is the one you want the index for and then findIndex will return the index of that item. 0 is seen as falsey so that’s why findIndex is returning -1 for the first item, because the index is 0 and you’re returning the index.

You also don’t need to use includes, you can just use ele[0] since name is at the 0 index. So the code would be:

var spot = stamps.findIndex(function(elem) {
  return elem[0] === name; // returns true or false depending on the item's name
});

Also, if you would prefer just to get the item in the stamps array you can use find instead of findIndex. It would return the item in the array instead of just the index.

var stamp = stamps.find(function(elem) {
  return elem[0] === name; // returns true or false depending on the item's name
});
5

Oh awesome, thank you @kme211!! Whew, now it’s finding all the values! Still more work to be done to get it fully to where I want, but at least now I’m able to access and update my array!! Thank you both!!

1 Like