Using filter method in JS and some keys are missing/undefined

Question

I am trying to filter a JSON object by a key length i.e. if key length is longer than 70 characters then add to new array, to be rendered later on in react. The below was my first attempt.

// First attempt:
const longJokes = jokesData.filter(x => x.question.length > 60 ) 

The problem that I'm having is that some objects don't have the key and x.question is undefined for some objects. The fix I came up with was to filter the JSON object first and then do the length filter, but now I am missing out on punchline only jokes.

// Second attempt:
const longJokes = jokesData.filter(x => x.question).filter(x => x.question.length > 60 ) 

My question is: Is there a better way to do this/handle missing keys? In the real world do objects within a JSON object have different/missing keys often? I feel like there is a much better way to handle this, but I don't know what im doing.
Maybe I should separately filter and add the missing punchLine only jokes to const longJokes

here is the full code and seperate JSON object below:

import React from "react"

import Joke from "./Joke"
import jokesData from "./jokesData"

function App() {
    const jokeComponents = jokesData.map(
        joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
        )
      
    const longJokes = jokesData.filter(x => x.question).filter(
        x => x.question.length > 60 ).map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />
        )
    
    console.log(jokesData[0].punchLine)
    console.log(longJokes)
    
    return (
        <div>
            {jokeComponents}
            {longJokes}            
        </div>
    )
}

export default App

// 
const jokesData = [
   {
       id: 1,
       punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."
   },
   {
       id: 2,
       question: "What's the best thing about Switzerland?",
       punchLine: "I don't know, but the flag is a big plus!"
   },
   {
       id: 3,
       question: "Did you hear about the mathematician who's afraid of negative numbers?",
       punchLine: "He'll stop at nothing to avoid them!"
   },
   {
       id: 4,
       question: "Hear about the new restaurant called Karma?",
       punchLine: "There’s no menu: You get what you deserve."
   },
   {
       id: 5,
       question: "Did you hear about the actor who fell through the floorboards?",
       punchLine: "He was just going through a stage."
   },
   {
       id: 6,
       question: "Did you hear about the claustrophobic astronaut?",
       punchLine: "He just needed a little space."
   }
]

export default jokesData 

Thanks

Answer 1

This can be achieved with a single filter too. You can only check for length when question is defined.

const longJokes = jokesData.filter(x => {
    if (x.question){
        return x.question.length > 60
    }
});