cancel
Showing results for 
Search instead for 
Did you mean: 

How to insert data from another API call into function

Hi

I am building a project website which uses the rawg api to fetch data about games and displays them on the screen. I have also implemented a search functionality. My function getGame is using the base url which is called API_URL. My problem is that the data returned by this link does not return description as one of its variables. It has other stuff like game id and game name etc but no description. I have checked the docs and it says that in order to get the details of a game i need to use a different fetch link which takes in id as a parameter. So i implemented another function called getDescription() which takes in an id from the games.forEach function. I am able to console log all the descriptions of the games that are being displayed. My question is how would i be able to insert the description into the dom inside my showGames function. My code is attached below. Thanks.

const API_URL = `https://api.rawg.io/api/games?key=${apiKey}&page=5&page_size=40`;
const SEARCH_API = `https://api.rawg.io/api/games?key=${apiKey}&search="`;
const form = document.getElementById('form');
const search = document.getElementById('search-game');
const main = document.getElementById('main');

getGames(API_URL)
async function getGames(url){
  const request = await fetch(url)
  const response = await request.json()
  showGames(response.results)
}

async function getDescription(id){
  const request = await fetch(`https://api.rawg.io/api/games/${id}?key=${apiKey}`)
  const response = await request.json();
  showDescription(response.description)
}

function showGames(games){
  main.innerHTML = '';
  games.forEach(game => {
    const { background_image, name, released, rating_top, id } = game;
    const gameEl = document.createElement('div');
    const platform = game.parent_platforms.map(platform => platform.platform.name).join(', ');
    getDescription(id)
    gameEl.classList.add('card');
    gameEl.innerHTML = `
    <div class="card-top">
      <img src="${background_image}" alt="" class="card-image">
    </div>
    <div class="card-bottom">
    <div class="card-info">
      <h1 class="game-name">${name}</h1>
      <h3>Release date: ${released}</h3>
      <p>Platforms: <span>${platform}</span></p>
      <p>*****I WANT TO ENTER THE DESCRIPTION HERE*****</p>
    </div>
      <div class="card-rating">
        <span class="${getColorByRating(rating_top)}">${rating_top}</span>
      </div>
    </div>
    `;
    main.appendChild(gameEl);
  })
}

Edit Here is my console log for response inside getDescription function Console log

I was able to get my wanted output by adding async right after my forEach like this games.forEach(async game => {....}) Here is my working code

const API_URL = `https://api.rawg.io/api/games?key=${apiKey}&page=5&page_size=40`;
const SEARCH_API = `https://api.rawg.io/api/games?key=${apiKey}&search="`;
const form = document.getElementById('form');
const search = document.getElementById('search-game');
const main = document.getElementById('main');

getGames(API_URL)
async function getGames(url){
  const request = await fetch(url)
  const response = await request.json()
  showGames(response.results)
}

async function getDescription(id){
  const request = await fetch(`https://api.rawg.io/api/games/${id}?key=${apiKey}`)
  const response = await request.json();
  return response;
}

function showGames(games){
  main.innerHTML = '';
  games.forEach(async game => {
    const { background_image, name, released, rating_top, id } = game;
    const gameEl = document.createElement('div');
    const platform = game.parent_platforms.map(platform => platform.platform.name).join(', ');
    const response = await getDescription(id)
    gameEl.classList.add('card');
    gameEl.innerHTML = `
    <div class="card-top">
      <img src="${background_image}" alt="" class="card-image">
    </div>
    <div class="card-bottom">
    <div class="card-info">
      <h1 class="game-name">${name}</h1>

 

6 REPLIES 6
IDs = []
for ID in [df["id"]]:
    IDs.append(ID) # Add IDs to ID list

IDS is not a list of int, but a list of pandas.Series. Containing exactly one Series, namely df["id"].

# This does what you were trying to do:
IDs = []
for ID in df["id"]:
    IDs.append(ID)
    
# Which can be shortened to
IDs = list(df["id"])

# But I think just passing the Series to your function, should work fine:

comments = return_comments_for(df["id"])

The real bug is that comments will be None after this, because return_comments_for doesn't return anything, so it will implicitly return None.

run_app(symbols) expects symbols to be an Iterable of Sequences of length 2. I leave it as an exercise how you can create that from a dataframe. Try to think about what the types are of the variables the code is processing. It will make your understanding of what the code does a lot clearer.

Mine has been the same. I know someone said it takes a few days but mine hasn't shown in weeks. I tried a system restore with a backup but that hasn't helped. I'm not sure if a new restore will resolve the issue, but as you mentioned I don't want to do that either. I'm also in 9.2.1 with all the health settings on to track data. If anyone knows of a fix that would be great.

Hey,

Application Programming Interface is a system that contains a set of rules or protocols or tools which help in providing interaction between two applications or software by standard data access. It is very much similar to a web service used in developing web pages or mobile apps. One application can call other programs API to utilize some functionality. APIs get requests and return the result in the programmer’s software system. If the system communicates with databases, then the APIs are exposed by PHP extensions. Examples: Google Maps API, youtube API.

joseemily
Contributor

As you said that getDescription function just returns a string, so you can do something like this async function

getDescription(id){ const request = await fetch(`https://api.rawg.io/api/games/${id}?key=${apiKey}`) const response = await request.json(); //showDescription(response.description) //instead of using a function, just return the response from this func return response } function showGames(games){ main.innerHTML = ''; games.forEach(game => { const { background_image, name, released, rating_top, id } = game; const gameEl = document.createElement('div'); const platform = game.parent_platforms.map(platform => platform.platform.name).join(', '); //save response into a variable const response = getDescription(id) gameEl.classList.add('card'); gameEl.innerHTML = ` <div class="card-top"> <img src="${background_image}" alt="" class="card-image"> </div> <div class="card-bottom"> <div class="card-info"> <h1 class="game-name">${name}</h1> <h3>Release date: ${released}</h3> <p>Platforms: <span>${platform}</span></p> <p>${response.description}</p> </div> <div class="card-rating"> <span class="${getColorByRating(rating_top)}">${rating_top}</span> </div> </div> `; main.appendChild(gameEl); }) }

Then use that variable response.description in the html string literal

kellyoua
Member

Yes

One type of data that can be inserted from an API call into a function is via JSON. JSON stands for JavaScript Object Notation and it is a lightweight data-interchange format used to store and transport data. It is easy to read and write, making it suitable for storing in database fields or other applications as a way to share information. To insert data from an API call into a function, the API must first be queried and then the resulting JSON object can be parsed and used to provide input to the function.