A Blind Date With Coding & Fetching APIs
paolomgarcia
Posted on October 11, 2022
Stepping into the world of coding has already felt like one of the better decisions I've made thus far in life. My past has included a very parent influenced criminal justice degree from a "prestigious university", followed up by a 5 year career in the gritty sales industry, which I must say I did not enjoy. A lack of joy in what I was doing and the future I saw for myself led me to scatter around different career changing options, bringing my to the hopes of becoming a software developer. My step-father has been a lead developer at UKG for many years, so the world of software engineering had always been nearby. After seeing him have so much success thru the years, as well witness several peers step into this world and have nothing but good things to say, I decided to take the biggest leap of my life and begin to learn how to code.
Coding was something I always felt was very niche; You see snippets of JavaScript online, and it looks like an entire new language with a completely different alphabet. I knew that this would be something that would take sacrifice from other enjoyments in my life and a full dive into learning something entirely foreign, but my puzzle driven mindset pushed me towards making the decision to dive into this brand new world.
Learning the basics of coding and JavaScript in the span of a couple of months has me truly wanting to master the art of bringing code together to create something reactive and responsive. APIs quickly became the thing I found most interesting in creating my first website. Being able to pull data from an outside source to constantly update something such as daily sporting events, weather, astrological information, and truly endless amounts of other information could lead to so many ideas for future events. Before knowing a thing about code, I thought each host had to self populate or create this data on their own, but APIs are what brings outside information to your basic web developer to create so many more opportunities.
Now, what I quickly came to find out is that most APIs will carry far more information than you may specifically find necessary. However, being able to call specific data, or in this case objects, was by far my biggest challenge to overcome thus far. Therefore, let's try to breakdown how to properly call a specific set of data from an API. Lets take my very first API fetch request for example...
fetch('https://sportspage-feeds.p.rapidapi.com/games?odds=spread&league=MLB', options)
.then(response => response.json())
.then(response => {
//console.log(response);
response.results.forEach(finalGame => { currentTeams(finalGame) })
})
// details.innerHTML = JSON.stringify(response);
const currentTeams = (finalGame) => {
const teams = document.createElement("p");
teams.innerHTML = finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;
scheduleBar.append(teams);
teams.addEventListener('click', () => {
//console.log(finalGame);
renderDetails(finalGame);
})
}
const renderDetails = (finalGame) => {
//const element = document.createElement("div");
//console.log(gameDetails(finalGame));
//console.log(finalGame);
const details = document.querySelector('#details');
details.innerHTML = finalGame.details.seasonType;
const odds = document.querySelector('#odds');
odds.innerHTML = finalGame.odds[0].spread.current.awayOdds + ' ' + finalGame.odds[0].spread.current.homeOdds;
const teams = document.querySelector('#teams');
teams.innerHTML = finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;
const venue = document.querySelector('#venue');
venue.innerHTML = finalGame.venue.name;
const gameTime = document.querySelector('#schedule');
gameTime.innerHTML = finalGame.schedule.date;
let todaysGame = new Date(finalGame.schedule.date);
//console.log(finalGame.schedule.date, todaysGame);
gameTime.innerHTML = todaysGame.toLocaleDateString('en-EN') + ' ' + todaysGame.toLocaleTimeString('en-EN');
const gameStatus = document.querySelector('#status');
gameStatus.innerHTML = finalGame.status;
if (finalGame.scoreboard) {
const currentScore = document.querySelector('#score');
currentScore.innerHTML = finalGame.scoreboard.score.away + ' - ' + finalGame.scoreboard.score.home;
}
{
"status": 200,
"time": "2022-09-20T13:19:57.022Z",
"games": 1,
"skip": 0,
"results": [
{
"schedule": {
"date": "2022-02-13T23:30:00.000Z",
"tbaTime": false
},
"summary": "Los Angeles Rams @ Cincinnati Bengals",
"details": {
"league": "NFL",
"seasonType": "postseason",
"season": 2021,
"conferenceGame": false,
"divisionGame": false
},
"status": "final",
"teams": {
"away": {
"team": "Los Angeles Rams",
"location": "Los Angeles",
"mascot": "Rams",
"abbreviation": "LAR",
"conference": "NFC",
"division": "West"
},
"home": {
"team": "Cincinnati Bengals",
"location": "Cincinnati",
"mascot": "Bengals",
"abbreviation": "CIN",
"conference": "AFC",
"division": "North"
}
},
"lastUpdated": "2022-02-14T03:02:18.640Z",
"gameId": 278943,
"odds": [
{
"spread": {
"open": {
"away": -4,
"home": 4,
"awayOdds": -110,
"homeOdds": -115
},
"current": {
"away": -4,
"home": 4,
"awayOdds": -110,
"homeOdds": -110
}
},
"moneyline": {
"open": {
"awayOdds": -193,
"homeOdds": 166
},
"current": {
"awayOdds": -196,
"homeOdds": 168
}
},
"total": {
"open": {
"total": 49.5,
"overOdds": -110,
"underOdds": -110
},
"current": {
"total": 48.5,
"overOdds": -110,
"underOdds": -110
}
},
"openDate": "2022-01-31T13:46:07.823Z",
"lastUpdated": "2022-02-13T23:23:16.272Z"
}
],
"venue": {
"name": "SoFi Stadium",
"city": "Inglewood",
"state": "CA",
"neutralSite": true
},
"scoreboard": {
"score": {
"away": 23,
"home": 20,
"awayPeriods": [
7,
6,
3,
7
],
"homePeriods": [
3,
7,
10,
0
]
},
"currentPeriod": 4,
"periodTimeRemaining": "0:00"
}
},
{
"schedule": {
"date": "2022-02-13T19:00:00.000Z",
"tbaTime": false
},
"summary": "Atlanta Hawks @ Boston Celtics",
"details": {
"league": "NBA",
"seasonType": "regular",
"season": 2021,
"conferenceGame": true,
"divisionGame": false
},
"status": "final",
"teams": {
"away": {
"team": "Atlanta Hawks",
"location": "Atlanta",
"mascot": "Hawks",
"abbreviation": "ATL",
"conference": "Eastern",
"division": "Southeast"
},
"home": {
"team": "Boston Celtics",
"location": "Boston",
"mascot": "Celtics",
"abbreviation": "BOS",
"conference": "Eastern",
"division": "Atlantic"
}
Choosing specific data to pull is all about getting down to the keys that you'd like to pull; and truly all so much easier once you break each object down with all of their individual keys. I'll breakdown an example from my recent project for pulling the home and away team from a baseball game separately to populate as a single string value... To break this down, (finalGame) will be referencing the JSON response from the API of "Results". Once we're in these results, we simply break down the keys and pull...
finalGame.teams.away.team + ' @ ' + finalGame.teams.home.team;
Above, we're stepping into each individual key of the away and home teams separately, and bringing them together in a string with an '@' value to show the second team is the home team, and that's where the game is "at".
Hopefully easy to understand, that is my first technical introduction to the ability of accessing APIs as well as a bit about myself and my recent endeavor into learning how to code.
Posted on October 11, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 26, 2024
