I'm new to coding and I'm doing a project to get a bit more practice with it.
I downloaded a pokemon zip https://github.com/fanzeyi/pokemon.json
Now what I did was very inefficient, I did a for loop in a ejs file and made sure to get the first pokemon before their evolutions and also get the information about that pokemon with the counter of the for loop 'i'.
However, now I'm trying to use an anchor tag to render me to another route that corresponds to the id of that pokemon, which I have done but I want to know if there's a way to create a for loop inside a while loop.
const express = require('express');
const app = express();
const path = require('path');
const methodOverride = require('method-override');
app.use(methodOverride('_method'));
const pokeData = require('./pokedex.json');
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.set('views', path.join(__dirname,'views'));
app.set('view engine', 'ejs');
app.use( express.static( "public" ));
app.get('/pokemon', (req,res) => {
res.render('pokemon', {pokeData});
});
app.get('/pokemon/:id', (req,res) => {
const { id } = req.params;
const data = pokeData[id];
res.render('pdata', {...data});
});
app.get('/practice/:id', (req,res) => {
const { id } = req.params;
const data = pokeData[id];
res.render('practice', {pokeData, data})
});
// app.get('/pokemon/:id', (req,res) => {
// const { id } = req.params;
// const data = pokeData[id];
// res.render('pokedata', {...data});
// });
app.listen(3000, () => {
console.log('running on port 3000 :)');
console.log(pokeData[1].type)
});main table with all pokemon.ejs
<%- include('partials/head') %>
<script>
const mainImg = document.querySelectorAll('#main');
</script>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Pokesnap</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Evolutions</th>
</tr>
</thead>
<tbody>
<% for(let i = 1; i <= 7; i+= 3) { %>
<tr>
<th scope="row"><span><img src="/sprites/00<%=[i]%>MS.png" alt=""></span>
<div>
<img id="main" src="/images/00<%=[i]%>.png" alt="">
</div>
</th>
<td id="align"><%= pokeData[i].name.english %> </td>
<td><%= pokeData[i].type %> </td>
<td><a href="/pokemon/<%=[i]%>">Evolutions</a></td>
</tr>
<% } %>
<% for(let i = 10; i <= 18; i+=3) { %>
<tr>
<th scope="row"><span><img src="/sprites/0<%=[i]%>MS.png" alt=""></span>
<div>
<img id="main" src="/images/0<%=[i]%>.png" alt="">
</div>
</th>
<td id="align"><%= pokeData[i].name.english %> </td>
<td><%= pokeData[i].type %> </td>
<td><a href="/pokemon/<%=[i]%>">Evolutions</a></td>
</tr>
<% } %> this is my data.ejs where I want to create my logic
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Pokesnap</th>
<th scope="col">Name</th>
<th scope="col">Type</th>
<th scope="col">Evolutions</th>
</tr>
</thead>
<tbody>
<% for(let i = id; i < 5; i++) { %>
<tr>
<th scope="row"><span><img src="/sprites/00<%=id%>MS.png" alt=""></span>
<div>
<img id="main" src="/images/00<%=id%>.png" alt="">
</div>
</th>
<td id="align"><%= data[i]name.english %> </td>
<td><%= type %> </td>
<td><img id="evolve" src="/images/00<%= id+[i] %>.png" alt="" /></td>
</tr>
<% } %>the last file I was just moving stuff around, the for loop doesn't really make sense I was just experimenting, also my main file with all the pokemon can be shorten if I apply the same logic.