Day 28: PokeDex Day 3

Lesson 3: PokeDex 11

The problem we have now is that the labels look rubbish.

We have a couple of options, we could use the built in string methods to change casing and remove dashes ... or we could just create a look up.

The easier path is to create a lookup and in this case it's actually pretty easy. Since we know there are, at most, 6 stats for a Pokemon we can just make a little object that maps special-attack to Special Attack

Add this near the top of your JavaScript:

1const POKEMON_STATS = {
2  hp: "HP",
3  attack: "Attack",
4  defense: "Defense",
5  "special-attack": "Special Attach",
6  "special-defense": "Special Defense",
7  speed: "Speed",
8};

And then modify our .reduce() to use the look up value.

1const statsData = pokemon.stats.reduce(
2  (accumulator, stat) => {
3    accumulator.names.push(POKEMON_STATS[stat.stat.name]);
4    accumulator.values.push(stat.base_stat);
5    return accumulator;
6  },
7  { names: [], values: [] }
8);

Now when you open a modal you'll see nicely formatted stat labels across the bottom of the chart.