0

I am trying to pull just the results from the below API. However it seems to be nested within some data and would like to extract it.

https://opentdb.com/api.php?amount=10000

How can it be done so that I only pull the results and that becomes my 'quizArray' useState?

import './App.css';

const url = 'https://opentdb.com/api.php?amount=10000';

function App() {
  const [quizArray, setQuizArray] = useState([]);

  const fetchData = async () => {
    const response = await fetch(url);
    const quiz = response.json();
    setQuizArray(quiz);
  }

  useEffect (() => {
    fetchData()
  }, [])
  console.log(quizArray)


  return (
    <div className="App">

    </div>
  );
}

export default App;```
isherwood
  • 58,414
  • 16
  • 114
  • 157

1 Answers1

-2

Your API URL returns have below response structure

{
"response_code": 0,
"results": []
}

To take out only the results key you can use dot(.) notation

obj.results will give you the quiz array of the objects


import './App.css';

const url = 'https://opentdb.com/api.php?amount=10000';

function App() {
  const [quizArray, setQuizArray] = useState([]);

  const fetchData = async () => {
    const response = await fetch(URL).then(res=>res.json()); // MODIFY THIS LINE
    const quiz = response.results;// MODIFY THIS LINE
    setQuizArray(quiz);
  }

  useEffect (() => {
    fetchData()
  }, [])
  console.log(quizArray)


  return (
    <div className="App">

    </div>
  );
}

export default App;
SKG
  • 64
  • 4