Junior — Senior
Getting a list of characters via API
livecode
Task condition
Create a component that will load character data from the open API Rick and Morty.
API response format
{
"info": {
"count": number,
"pages": number,
"next": string | null, // link to the next page
"prev": string | null // link to the previous page
},
"results": [
{ "name": string, "id": number }
]
}
If the request is made with a name not in the database, the server returns a 404 error.
Example request function (you can change variable names, but the code structure should remain the same):
function fetchCharacters(query, pageNumber = 1, options = {}) {
return fetch(
`https://rickandmortyapi.com/api/character?name=${query}&page=${pageNumber}`,
options
)
.then(res => res.json())
}
export default function App() {
return '20 minutes adventure'
}
Sample file (API JSON response) is provided below and can be used for local testing.
{"info":{"count":107,"pages":6,"next":"https://rickandmortyapi.com/api/character?page=2&name=rick","prev":null},"results":[{"id":1,"name":"Rick Sanchez","status":"Alive","species":"Human","type":"","gender":"Male","origin":{"name":"Earth (C-137)","url":"https://rickandmortyapi.com/api/location/1"},"location":{"name":"Citadel of Ricks","url":"https://rickandmortyapi.com/api/location/3"},"image":"https://rickandmortyapi.com/api/character/avatar/1.jpeg","episode":["https://rickandmortyapi.com/api/episode/1", ...],"url":"https://rickandmortyapi.com/api/character/1","created":"2017-11-04T18:48:46.250Z"}, ...]}"}