How to reach multiple elements in an array without using axios

Question

Yesterday i saw a React project on youtube and i wanted to test it myself.

This function connects to the link and returns me the questions of the category and difficulty I selected with my buttons . code works fine ,but i don't want to do that step with axios and any API related stuff.

const fetchQuestions = async (category = "", difficulty = "") => {
const { data } = await axios.get(
  `https://opentdb.com/api.php?amount=10${
    category && `&category=${category}`                  
  }${difficulty && `&difficulty=${difficulty}`}&type=multiple`
);
  console.log(category);
  console.log(difficulty);

setQuestions(data.results);};

I only want to see the questions in the difficulty and category I chose . So i created a json file and tried to get those questions&answers etc. with that but it didn't work . I tried to map things inside and log category and difficulty but i can't even reach those . I know that i need some conditions etc. but i can't create the logic .

const fetchQuestions =(category="",difficulty="")=>{const {data}=QuestionList.results.map((q)=> (console.log(category),console.log(q[category]),console.log(data),console.log(q[difficulty]))); setQuestions(data.results);}

this is json file : questions.json -> i imported as QuestionList

{
"response_code": 0,
"results": [
  {
    "category": "Books",
    "type": "multiple",
    "difficulty": "medium",
    "question": "some question?",
    "correct_answer": "blabla",
    "incorrect_answers": ["Transformers", "Care Bears", "Rubik’s Cube"]
  },
  {
    "category": "Books",
    "type": "multiple",
    "difficulty": "easy",
    "question": "sdklgksdflgjsdf",
    "correct_answer": "Badminton",
    "incorrect_answers": ["Table Tennis", "Rugby", "Cricket"]
  },
  {
    "category": "Books",
    "type": "multiple",
    "difficulty": "medium",
    "question": "fgdfgdfgdfgdfgg?",
    "correct_answer": "9",
    "incorrect_answers": ["6", "10", "3"]
  },
  {
    "category": "Films",
    "type": "multiple",
    "difficulty": "medium",
    "question": "asdasdasdasd",
    "correct_answer": "Parlor",
    "incorrect_answers": ["Open Room", "Sitting Room", "Loft"]
  },
  {
    "category": "Films",
    "type": "multiple",
    "difficulty": "medium",
    "question": "asdasdasddddd",
    "correct_answer": "Link",
    "incorrect_answers": ["Wario", "Q*bert", "Solid Snake"]
  }
]}

I've been stuck on this for 9 hours but i still have no solution :)

Answer 1

Issue

const fetchQuestions = (category = "", difficulty = "") => {
  const { data } = QuestionList.results.map(
    (q) => (
      console.log(category),
      console.log(q[category]),
      console.log(data),
      console.log(q[difficulty])
    )
  );
  setQuestions(data.results);
};

The code above is calling the Array.prototype.map function but the callback is returning a Comma Operator expression and the last operand's return value is what is returned. console..log is a void return, however, so undefined is returned as the map value. On top of the, .map returns an array, not an object, so there's no data property to destructure from the mapped array. Later accessing data.results is likely throwing a TypeError, something to effect of "cannot access 'results' of undefined".

Solution

If I understand your question correctly you have just created a local questionList JSON file that is imported and you are wanting to filter the results by some search criteria.

Example:

const [questions, setQuestions] = useState([]);

const fetchQuestions = (category = "", difficulty = "") => {
  const data = questionList.results.filter(
    (question) =>
      question.category.toLowerCase().includes(category.toLowerCase()) &&
      question.difficulty.toLowerCase().includes(difficulty.toLowerCase())
  );
  setQuestions(data);
};

useEffect(() => {
  fetchQuestions();
}, []);

• fetchQuestions(); - returns all 5 results
• fetchQuestions("books"); - returns the 3 "books" category entries
• fetchQuestions("", "easy"); - returns the 1 "easy" difficulty entry