Create & Format an API Project: Baseball Card

In this exercise, you'll see how to pull data from an API and display it nicely formatted in a web page. We'll get data from mlb.com API on the Houston Astro baseball player Alex Bregman. Pick your own player if you want.

1. First, do a search on mlb.com api.
2. This retrieves MLB Data API/.
   Notice that this site lists endpoints such as Get Teams By Season, Get 4-Man Roster, Get Info Per Game Type.
3. MLB Data API is quite helpful in showing how to set up various API requests. It shows how to get information on Yoenis Céspedes. But this project is about Alex Bregman so this is the request to enter:
   https://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code=%27mlb%27&active_sw=%27Y%27&name_part=%27bregman%25%27
   http://lookup-service-prod.mlb.com/json/named.search_player_all.bam
   http://lookup-service-prod.mlb.com/json/named.search_player_all.bam?sport_code='mlb'&active_sw='Y'&name_part='young%'&search_player_all.col_in=player_id
   %25 functions like a wildcard: for example, bregman* if you weren't sure whether his name was bregmann. %27 is the single quote character: if you replace the request string instances of %27, you see that the browser reinstates the %27. This is the Bregman data that is retrieved by running the above command:
4. This is the output from the above command:
   Hover here

   
5. Now that you have the data available, set up the shell of a basic web page:
   
6. Next, place this AJAX JQuery call to the API just below the existing script code, but still within the head tags:
   
7. Now that the URL for the API has been established in settings, add these lines to make the call:
   
   If you look back at the hover in step 4, you see that response (from the API) is concatenated with search_player_all with a period, which is then concatenated with queryResults with a period, which is then concatenated with row with a period, which finally concatenated with team_full with a period. Tom Johnson calls that dot notation. All this is stored in the variable content1, which will yield Houston Astros.
8. Select the other variables to display for the player, for example:
   
   
9. The next step is to prepare these variables to be displayed on the web page. Still in the ajax query function begun in step 12, add the lines below and close the function with });
   
   
   As you will see in the web page details, #teamFull will be an ID in the web page. The content1 variable is appended to the <span id="teamFull"></span> tags—the variable is inserted within the span tags.

Add player statistics

You now have a baseball card that shows basic data about the player such as birth date, team, height, and so on. Next is to pull data from the API using a different request.

1. Now we can start developing the Bregman Baseball Card! The initial API request provides some basic data on Alex such as birth date, height, and the all-important player ID which for Alex is 608324. The baseball card needs his performance statistics, which can be accessed with this API request:
   https://lookup-service-prod.mlb.com/json/named.sport_career_hitting.bam?league_list_id=%27mlb%27&game_type=%27R%27&player_id=%27608324%27
2. And here is the output:
   Hover here

   
3. Now, there is a big Challenge: what do these abbreviations mean? See http://m.mlb.com/glossary.
4. So now the task is to choose the rest of the data to display on the Bregman card. Here is a list of some of the labels and abbreviations you might use:

   Height	height_inches
   Height	height_feet
   Weight	weight
   Position	position
   Hitting	bats
   Throwing	throws
   Birth date	birth_date
   Team	team_full
   MLB debut	pro_debut_date
   Home runs	hr
   RBIs	rbi
   Average	avg
   Slugging	slg
   OBP	obp
   Walks	bb
   Hits	h
   At bats	ab
   Strikeouts	so
   Doubles	d
   Triples	t
   At bats	ab

5. Once again, you have to make an AJAX query call to the API, this time a different URL:
   
   
6. And again, you have to use the parameters used by the API to get the data you want out of the API:
   
   
   Notice that the AJAX function call is repeated, new variables are declared, and the variables are assigned to IDs in the web page.
7. Next is to set up the tables in the body of the web page. Each row will display some bit of data about the player. Here is an example:
   
   
8. Fill out the rest of the table, add some headings, and styling for the headings and the table, and you've got yourself a baseball card!
9. Take a look at the Alex Bregman baseball card with just Alex's height displayed. Press Ctrl+U/Cmd+U to see its source.

Related information

Return to the main index.
Baseball Abbreviations Glossary
sportradar. Another API baseball source
JSON Pretty Print
MLB Data API. API used here.