diff --git a/README.md b/README.md index 7e08324..894ac7b 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ ### Setup - * Fork, clone, yarn install, yarn start + *- Fork, clone, yarn install, yarn start ### Let's fetch users - * Go to this URL in your browser, https://jsonplaceholder.typicode.com/users - * Study the JSON format to understand what type of data it returns - * Now you need your running code to be able to retrieve this data so that you can use it to make a webpage. - * In index.js, make a fetch call to the url - * Specify the callback function usersRetrieved to handle when the fetch call is done, .then() - * Specify the callback function userJSONReady to handle when the json is ready, .then() + *- Go to this URL in your browser, https://jsonplaceholder.typicode.com/users + *- Study the JSON format to understand what type of data it returns + *- Now you need your running code to be able to retrieve this data so that you can use it to make a webpage. + *- In index.js, make a fetch call to the url + *- Specify the callback function usersRetrieved to handle when the fetch call is done, .then() + *- Specify the callback function userJSONReady to handle when the json is ready, .then() ### Let's fetch comments - * Go to this URL in your browser, https://jsonplaceholder.typicode.com/comments - * Study the JSON format to understand what type of data it returns - * In index.js, make a fetch call to the url - * Try using inline functions as the callbacks to the .then() - * Use usersRetreived as an example of how to put the data into the webpage - * Loop through the comments array and create a div for each one that shows the comment name. - * Set the innerHTML of a div with id = comments + *- Go to this URL in your browser, https://jsonplaceholder.typicode.com/comments + *- Study the JSON format to understand what type of data it returns + *- In index.js, make a fetch call to the url + *- Try using inline functions as the callbacks to the .then() + *- Use usersRetreived as an example of how to put the data into the webpage + *- Loop through the comments array and create a div for each one that shows the comment name. + *- Set the innerHTML of a div with id = comments diff --git a/public/index.html b/public/index.html index b4d4db6..779c0b4 100644 --- a/public/index.html +++ b/public/index.html @@ -9,6 +9,7 @@
+
diff --git a/src/index.js b/src/index.js index 50f2b59..27f43b3 100644 --- a/src/index.js +++ b/src/index.js @@ -12,3 +12,20 @@ function userJSONReady(users) { usersDiv.innerHTML = (usersHTML); } +fetch('https://jsonplaceholder.typicode.com/users') //fetch users +.then(usersRetrieved) +.then(userJSONReady); + +function commentJSONReady(comments) { + const commentsDiv = document.getElementById('comments'); + let commentsHTML = ''; + for (let i = 0; i < comments.length; i++) { + const comment = comments[i]; + commentsHTML += `
${comment.name}
`; + } + commentsDiv.innerHTML = commentsHTML; +} + +fetch('https://jsonplaceholder.typicode.com/comments') //fetch comments +.then(res => res.json()) +.then(commentJSONReady);