Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A Pokemon Random List Generator, Because Pokemon

DZone's Guide to

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
Free Resource

Add user login and MFA to your next project in minutes. Create a free Okta developer account, drop in one of our SDKs to your application and get back to building.

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/

Launch your application faster with Okta’s user management API. Register today for the free forever developer edition!

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.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}