Encountering a TypeError while attempting to retrieve object values in JavaScript

Question

Encountering a TypeError while attempting to retrieve object values in JavaScript

Having trouble identifying a word that is not in my word list, I keep encountering this error: Uncaught TypeError: Cannot read properties of undefined (reading 'includes') at handleKeyup

Included in my bigwords.js file is the following:

var words = [
    {"id": 1, "word": "abbreviate"},
    {"id": 2, "word": "bamboozled"},
    {"id": 3, "word": "calculator"},
    {"id": 4, "word": "disrespect"}
]

I have an if statement that verifies whether the word is absent from the object.

if (!(words.includes(currentGuess))) {
    document.getElementById('tip').innerHTML = "Word not in dictionary";
    console.log('word not contained in dictionary')
    return
  }

I've attempted various methods to rewrite this without using .includes but haven't found success yet. My goal is for the code to run only if currentGuess does not match any of the words in the list. Thank you!

javascript arrays list key key-value

Answer 1

Answer №1

If your array is structured like the following and currentGuess is a string, you can utilize the includes method:

const words = ["abbreviate","bamboozled","calculator","disrespect"]
words.includes(currentGuess) // true or false

However, if you are dealing with an array of word objects, you should use find, some, or filter to check if currentGuess matches any word value within each object in the words array:

words.find(w => w.word === currentGuess)
// or
words.some(w => w.word === currentGuess)
// or
words.filter(w => w.word === currentGuess).length > 0

For example:

const words = [
    {"id": 1, "word": "abbreviate"},
    {"id": 2, "word": "bamboozled"},
    {"id": 3, "word": "calculator"},
    {"id": 4, "word": "disrespect"}
]

const checkWord = (currentGuess) => {
  if (!(words.find(w => w.word === currentGuess))) {
    // not found
    document.getElementById('tip').innerHTML = "Word not in dictionary";
    console.log('word not contained in dictionary')
  } else {
    // found
    document.getElementById('tip').innerHTML = "Word in dictionary";
    console.log('word contained in dictionary')
  }
}

checkWord('disrespect');
// checkWord('random');

<div id="tip"></div>

Your error may be due to the words array being inaccessible in your scope as mentioned by @Konrad. Nevertheless, the search conditions above are shared for reference.

Answer 2

If your array is structured like the following and currentGuess is a string, you can utilize the includes method:

const words = ["abbreviate","bamboozled","calculator","disrespect"]
words.includes(currentGuess) // true or false

However, if you are dealing with an array of word objects, you should use find, some, or filter to check if currentGuess matches any word value within each object in the words array:

words.find(w => w.word === currentGuess)
// or
words.some(w => w.word === currentGuess)
// or
words.filter(w => w.word === currentGuess).length > 0

For example:

const words = [
    {"id": 1, "word": "abbreviate"},
    {"id": 2, "word": "bamboozled"},
    {"id": 3, "word": "calculator"},
    {"id": 4, "word": "disrespect"}
]

const checkWord = (currentGuess) => {
  if (!(words.find(w => w.word === currentGuess))) {
    // not found
    document.getElementById('tip').innerHTML = "Word not in dictionary";
    console.log('word not contained in dictionary')
  } else {
    // found
    document.getElementById('tip').innerHTML = "Word in dictionary";
    console.log('word contained in dictionary')
  }
}

checkWord('disrespect');
// checkWord('random');

<div id="tip"></div>

Your error may be due to the words array being inaccessible in your scope as mentioned by @Konrad. Nevertheless, the search conditions above are shared for reference.

Encountering a TypeError while attempting to retrieve object values in JavaScript

Answer №1

Similar questions

Activate mouseover function automatically for each feature on the leaflet

In order to extract a value from a different webpage, I must first make a request to that webpage and extract the XML value from it

What is the best way to retrieve the text from a linked button within my rad grid using jQuery?

jquery success json ajax datatype

There seems to be an issue with Vue JS slots[name$1].every function as it is

Incorporating a Link into a Radio Button component in Material-UI using react-router

The Jquery calculation feature sometimes mistakenly adds an incorrect value before calculating the correct value

Bootstrap Display Password Feature Failing to Function

In JavaScript, it is not possible to retrieve the maximum or minimum value of an array

Utilize UI-Router $stateProvider in Angular run block for Promise Resolution

Error message: "The post request is returning a value of 0

Oops! The function 'ModalDemoCtrl' has not been defined, causing an error

What is the best way to update the style following the mapping of an array with JavaScript?

What is the solution using high-order functions?

Remove all nested object entries

Creating a form for adding and editing using React Hook Form

How to retrieve and modify JSON data in Node.js using Stream with both Get and Post methods

Prevent $.ajax with jQuery when a button is clicked

How can the Request and Response objects be accessed in external Node.js (Express) files?

"Using AngularJS to fetch data with $http and store it in an