rbi-learning / Today-I-Learned

1 stars 0 forks source link

8/4 Sara Ho #54

Open saraashleyho opened 4 years ago

saraashleyho commented 4 years ago

Today I Learned...

Transmitting Data using a JSON file

Step 1: Create an asynchronous function to pull data from a JSON file and convert it into a data object.

Example:

const fetchProfileData = async () => { const response = await fetch("https://api.github.com/users/andyweiss1982") const profileData = await response.json()

Step 2. Insert the data object into our website using document query selector. If you are pulling an array, utilize a function to fetch the array, map it, join it and pull it into the webpage using .innerHTML.


const h1 = document.querySelector('h1')
h1.textContent = `all about ${profileData.login}

const profilePic = document.querySelector("#profile-pic")
profilePic.src = profileData.avatar_url  
profilePic.alt = profileData.name

Github profile example https://repl.it/@saraashleyho/GithubProfileAPI#script.js