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: https://static.raymondcamden.com/pokemon/