Marvel's API - Show all characters and edit a character

Alien18 0
Viewed 28

I'm using Marvel's API to build a project where the user sees all the characters that exist on the API.

https://developer.marvel.com/documentation/generalinfo

I'm having some problems with getting all the characters. Marvel's API only lets you get 100 characters max. I know that you can add an attribute to the link's request (offset) to show the characters that come after the first 100 (again, the offset limit is 100). I believe that I can make multiple requests and in each request, increment the offset value, so that all characters show up. The problem is that I don't know how to do it.

let apiKey = process.env.REACT_APP_MARVEL_API_KEY;
  let privateKey = process.env.REACT_APP_MARVEL_API_HASH;
  let ts = Date.now().toString();
  let hash = getHash(ts, privateKey, apiKey);
  const URL = `https://gateway.marvel.com/v1/public/characters?ts=${ts}&apikey=${apiKey}&hash=${hash}&limit=100`;
  return fetch(URL)
    .then((response) => response.json())
    .catch((error) => console.log("ERROR : ", error));

My last problem is:

I would like for a visitor in my project to be able to change a character's information (name, image, description, etc), but Marvel's API doesn't allow POST requests. Is there a way to do this?

Thanks in advance for the help.

rest reactjs
1 Answers

You can define a helper function that receives an offset, and then have another function that calls the helper with different values. The first call with be with offset=0, then offset=0 and so on, so you can increment that in a loop.

I can see in the API that the response has a total property, so you can always check if the offset is smaller than that total to keep calling it.

The helper function would be something like this:

const getCharacters = async (offset = 0) => {
  let ts = Date.now().toString();
  let hash = getHash(ts, privateKey, apiKey);
  const params = {
    ts,
    apikey: apiKey,
    hash,
    limit: "100",
    offset: `${offset}`,
  };
  const searchParams = new URLSearchParams(params);
  const URL = `https://gateway.marvel.com/v1/public/characters?${searchParams.toString()}`;

  const response = await fetch(URL)
    .then((response) => response.json())
    .catch((error) => console.log("ERROR : ", error));
  return response.data;
};

Using URLSearchParams allows you to define the GET parameters. Notice I'm also using async/await to deal with asynchronous code.

Then the function that gets them all can look like this:

const getAllCharacters = async () => {
  let offset = 0;
  let allCharacters = [];
  let hasMoreResults = true;

  while (hasMoreResults) {
    const { total, results } = await getCharacters(offset);
    allCharacters = [...allCharacters, ...results];
    offset += 100;
    hasMoreResults = offset < total
  }

  return allCharacters;
};

This fetches using the helper function, awaiting the results and incrementing the offset every time the loop happens, until the offset is greater than the total.

Notice this is all untested code, but I trust it will be useful as a starting point

I don't know how many characters there are, so it can take many requests to fetch them all. Alternatively, something you could do is to fetch them as you scroll to show something to the user and allow for a better experience, but that's a whole different topic.

Regarding changing a character's name. If the API doesn't provide a way I doubt they want you to allow such changes.

Roberto Sonck0
Related