Over a million developers have joined DZone.

A Pokemon Random List Generator, Because Pokemon

When your son comes to you with a request to generate random list of all 721 Pokemon so he can draw them everyday, you can't help but write a JavaScript program to do it.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

So, I’m not really a Pokemon person (and yes, I know there’s an accent in the word, but I’m not even going to bother trying to type that), but my son came to me last night with an interesting request. He is quite the artist, and he decided he wanted to start an incredibly ambitious project: Every day he is going to sketch a Pokemon. All 700 plus of them. His request was rather simple. Given that Pokemon had a number, he wanted me to generate a random list from 1 to 721.

I told him I could do that – but I had a better idea. I knew there was a Pokemon API (Pokéapi) and I thought I could probably whip up a quick list for him using that data. Unfortunately, the API doesn’t support the ability to return all the Pokemon at once. But the API itself is 100% open source (https://github.com/phalt/pokeapi) and it includes the raw CSV data behind the API. So I cloned a copy of the repo locally and built the following quick demo. As a warning, this is not optimized. I wanted to build something super quick (it was last night, I was tired, etc. etc.).

<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
function randomIntFromInterval(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}

$(document).ready(function() {

console.log("ready to go");
$.get("pokeapi/data/v2/csv/pokemon.csv", function(res) {
var lines = res.split(/\n/);
//remove line 1
lines.splice(0,1);

//remove specials
lines = lines.filter(function(line) {
var parts = line.split(",");
return parseInt(parts[parts.length-1],10) === 1;
});

console.log(lines.length + " lines of data");

var s = "";
while(lines.length) {
var chosen = randomIntFromInterval(0, lines.length-1);
var poke = lines[chosen];
var parts = poke.split(",");
var sprite = "<img src=\"pokeapi/data/Pokemon_XY_Sprites/"+parts[0]+".png\">";
s += "<tr><td>"+parts[0]+"</td><td>"+parts[1]+"</td><td>"+sprite+"</td></tr>";
lines.splice(chosen,1);
}
$("table tbody").append(s);
});

})
</script>
<style>
th {
width: 200px;
}
td {
text-align: center;
}
</style>
</head>

<body>

<table border="1">
<thead>
<tr><th>ID</th><th>Name</th><th>Sprite</th></tr>
</thead>
<tbody>
</tbody>
</table>

</body>
</html>

I begin by simply Ajaxing the CSV file that contains all the Pokemon data. I strip off the first line (it just contains headers) and then filter out rows containing “non-default” Pokemon. My son can explain why that is important – frankly I didn’t get it. Then I just pick a random item from the array and remove it.

The GitHub repo also contains images (sprites) so I include that in the table display. Here is a quick snapshot of some of the report:

shot1

If you want to run the demo yourself, you can do so here: http://static.raymondcamden.com/pokemon/

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
javascript ,humor

Published at DZone with permission of Raymond Camden, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}