Now that we have worked our way through the dog API, it's time to take on a more complicated animal (and api). The cat api (catapi.com), like the dog api, has lots of images but also offers additional information as the screen capture at right indicates. In this exercise we are going to work through the process of getting at that information and, of course, lots of cute and weird kitty images!
To begin our feline journey, click this link to see the initial information set we will be drawing from. This url brings up a page with detailed information about 67 breeds of domestic cats in one great big array. Until Fall 2022, the only thing that was missing from the info set was a link to an image for each breed, which meant that we had to jump through several additional hoops to get them. As we know cats are temperamental, and sure enough, changes occurred to the API which meant that I had to update this lesson. The good news is that the changes actually made things easier for once.
Download kitty.zip, unzip it and move the contents into wherever you are doing the work for this class. Open both files with your editor and take a look at the code.
- As you can see the code in kitty.js is pretty simple so far. Basically, all we are doing is using axios to pull data from https://api.thecatapi.com/v1/breeds, the url that you just visited. For starters, let's get some of that information to display on our html page.
Create an empty array variable in your data named catArray. Then use the new catArray to capture the data from response as shown below.
- Now use this screen capture as a guide to output the name of each breed in your html file. Save everything and preview. You should see a long list of names running from Abyssinian to York Chocolate. Hopefully, your interest is aroused and you want more information. And pictures!
- Our next job is to get the URL of an image for a given cat breed. If you take a careful look at the json feed, you should see a value at the bottom of each object named reference_image_id. Well, it just so happens that the CatAPI people have a unique image for each breed at tied to this URL: https://cdn2.thecatapi.com/images/
For example, if you visit the url https://cdn2.thecatapi.com/images/ozEvzdVM-.jpg
you will see an example of how this URL combined with a reference it, plus .jpg at the end brings up one of those images! So now your job is to combine all of that and come up with a series of cat images.The way that I approached the problem was to add two variables named dpart1 and dpart2 shown below to my data underneath catarray: []. The first variable brings in the base URL while the second one adds the .jpg that you need at the end.dpart1:"https://cdn2.thecatapi.com/images/",dpart2:".jpg"Once you have those variables in place all you need to do is add the image statement shown below to your html file.<img :src="dpart1+eachCat.reference_image_id+dpart2"> - At this point, names and 67 images should appear but some of those images are quite big, so you will need to deal with that problem via CSS . Also, we know NOTHING about those cats except their names, but there is plenty of additional information about each one of them at the API.
- Now that you know how to bring in names, bring in at least three additional sets of information such as temperament, description, etc. Remember, you will need to add these values to the catObj in order to access them.
- Notice as well that some of those characteristics are tied to numbers. Give some thought to how you would use one or two of those numerical values to make (for example) a different sized bar chart appear for each cat breed. Or make the text color change if the cat is not Child Friendly. Or something!
- Finally, format your page! It's a mess. Use flex or some other method in conjunction with div tags, to make your images and associated information appear in a series of boxes with borders, instead of simply one on top or another.