From 2029ce43ee4a3a0667722f77f2e913ed0cbf1d65 Mon Sep 17 00:00:00 2001 From: Mehmet Sonmezates Date: Wed, 23 Aug 2017 18:49:00 -0500 Subject: [PATCH 1/2] initial commit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 7e08324..6e74255 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ ### 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 From c19d2f98bee40f00db83e8bd199784b62c5832b0 Mon Sep 17 00:00:00 2001 From: Mehmet Sonmezates Date: Wed, 23 Aug 2017 19:23:28 -0500 Subject: [PATCH 2/2] show users and comments' name by uing fetch --- README.md | 26 +++++++++++++------------- public/index.html | 1 + src/index.js | 17 +++++++++++++++++ 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 6e74255..894ac7b 100644 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ ### Setup *- 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);