Sobes.tech
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"}, ...]}"}