Issues

[AlexMcBex]

What's the problem you're trying to solve?

I need help with managing the data from an outside API, in particular in the INDEX routes when multiple elements are shown I don't know how I can select a different index in an array of data for each object Example: in the code below with const pokemonShow =(${pokemonData[10].url}) I only access the data of the 11th pokemon (10 index in the array) but I would need to access a specific different value for each specific pokemon in the list

Post any code you think might be relevant (one fenced block per file)

// POKEDEX ALL -> pokeapi all pokemons
router.get('/Dex', async (req, res) => {
            const pokemonInfo = await axios(`${process.env.POKEAPI_URL}/pokemon?offset=0&limit=150`)
            const pokemonData = pokemonInfo.data.results
            const pokemonShow =(`${pokemonData[10].url}`)
            console.log(pokemonShow) 
            res.render('pokemon/Dex', { pokemonData, ...req.session })
        })

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

What is your best guess as to the source of the problem?

There must be a function where I can extract the value of choice and link it to the pokemon object of the same array index but I'm having trouble researching

What things have you already tried to solve the problem?

I tried for loops and using .forEach() on the pokemonData array extracted from the API but I'm having trouble with the syntax

Paste a link to your repository here

https://github.com/AlexMcBex/PokemonTeams_Project-2

[timmshinbone]

You should rethink the data that you're showing on the index page. Each pokemon that comes back from the pokeApi has certain fields that can be utilized in your file. My recommendation is to send the entire array of pokemon to your index page, loop over them there, and display whichever fields are relevant/needed for that page.

[AlexMcBex]

The problem is that the path picked with Axios (https://pokeapi.co/api/v2/pokemon) doesn't have any pokemon values except the name (that I already used in index to list them) and the URL to their object with specific values (https://pokeapi.co/api/v2/pokemon/). I'm having trouble using values from those objects into my index page (I tried to store it in the pokemonShow const in the code above).

[timmshinbone]

Ok, share a couple of the results of your api call here(not the whole list, just a few items in the array)

[AlexMcBex]

this is the Dex.liquid page:

{% layout 'layout.liquid' %}
{% block content %}
  <div>
    <h2 class="display-6">All Pokemon</h2>
    <div class="row">
      {% for pkmn in pokemonData limit: 151 %}
        <div class="card ms-3 mb-3" style="width: 15rem;">
          <h4 class="card-header"style="text-transform: capitalize;">{{ pkmn.name }} </h4>
          <div class="card-body">
            <p class="card-text">
            </p>
            <a href="/pokemon/Dex/{{ pkmn.name }}" class="btn btn-info">
              View {{ pkmn.name }}
            </a>
          </div>
        </div>
      {% endfor %}
      <a href="" class="btn btn-info">Show more</a>
    </div>
  </div>
{% endblock %}

[timmshinbone]

Ok, so, show the controller for this route /pokemon/Dex/{{ pkmn.name }}

[AlexMcBex]

here it is, with one element it works correctly but in Index, with more elements, it gives me trouble:

    //POKEDEX SHOW route
router.get('/Dex/:name', async (req, res) => {
            const pokemonName = req.params.name.toLowerCase()
            const pokemonInfo = await axios(`${process.env.POKEAPI_URL}/pokemon/${pokemonName}`)
            const pokemonData = pokemonInfo.data
            // console.log(pokemonData)
            const {username, loggedIn, userId} = req.session
            res.render('pokemon/DexShow', { username, pokemonData, loggedIn, userId })
        })

[timmshinbone]

What kind of trouble is it giving you? looks like it should work out fine?

[AlexMcBex]

I want to access to the pokemon values in the API pokemon objects and bring them in the index route. I can't access it from https://pokeapi.co/api/v2/pokemon/ because the 'results' objects only have 2 keys, the name (which I used in the Index already with a for loop in liquid) and the URL link to the values of each specific pokemon (https://pokeapi.co/api/v2/pokemon/ pokemon id or pokemon name) which contain the values that I would like to use in the index page.

[AlexMcBex]

maybe I can make another await axios() with the pokemon url (https://pokeapi.co/api/v2/pokemon/ pokemon id or pokemon name), I don't know how I can make the URL different for each pokemon in index. The pokemon ids start from 1 and on, so I could make an if statement but I don't know how to link every URL to the correct element in index.

[timmshinbone]

Ok, my question is this, why do you want that additional info in your index? Is it going to enhance the user's experience? In my opinion, it wouldn't be as nice as having a simple index that allows the user to choose which pokemon they'd like to see more info about.

[AlexMcBex]

something like this where "NUM" starts from 1, increments with each iteration and each iteration is linked to a different for element in liquid:

// POKEDEX ALL -> pokeapi all pokemons
router.get('/Dex', async (req, res) => {
        const pokemonURL = `${process.env.POKEAPI_URL}/pokemon`
            const pokemonInfo = await axios(`${process.env.POKEAPI_URL}/pokemon`)
            const pokemonShow = await axios(`${pokemonURL}/NUM/`)
            const pokemonData = pokemonInfo.data.results
            // pokemonData.forEach(pkmn => console.log(pkmn.url))
            // const pokemonShow =(`${pokemonData[252].url}`)
            console.log(pokemonShow) 
            res.render('pokemon/Dex', { pokemonData, ...req.session })
        })

[AlexMcBex]

I would have preferred adding some values of the pokemons in index (like id or types) not only for aesthetic but also to help a search or filter functions but I guess they're not a priority.

[timmshinbone]

ok let's brainstorm in a breakout room

[AlexMcBex]

Thank you Timm, I'll go with the new plan of action now. Closing the issue.