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;```
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;