JS 008 — CRUD GET Communicating With The Server

Greem
3 min readNov 19, 2023
  1. console.log resp.json() and data to get the Promise in the console
    fetch("http://localhost:3000/stores/")
.then(resp => console.log(resp.json())) //this case it was fulfilled(resolved)
.then(data => console.log(data))
.catch(err => console.error(err))

2. .then method is Asynchronous code

    console.log("before fetch")

fetch("http://localhost:3000/stores/") //promise .then method is asynchronously called from the server
.then(resp => console.log(resp.json())) //this case it was fulfilled(resolved)
.then(data => console.log(data))
.catch(err => console.error(err))

console.log("after fetch")

3.

Question: How can we make this fetch request more dynamic using different url?

answer: Create a function take the URL as a parameter, so when the function gets fired up we can send different URL as an argument

        function handleRequest(url){
fetch(url) //promise .then method is asynchronously called from the server
.then(resp => console.log(resp.json())) //this case the promise was fulfilled(resolved)
.then(data => console.log(data))
.catch(err => console.error(err))
}

handleRequest("http://localhost:3000/stores/")

4. but instead of just console logging, how can I utilize the data?

         fetch(url)
.then(resp => console.log(resp.json())) //promise
.then(data => console.log(data)) //rendering changes

5. Let’s create a rendering the data function for both store and book

        function handleRequest(url){ //promise
return fetch(url)
.then(resp => resp.json())
}

handleRequest("http://localhost:3000/stores/") //rendering the data
.then(stores => console.log(stores))

handleRequest("http://localhost:3000/books/") //rendering the data
.then(books => console.log(books))

make sure to add return keyword that we are returning the promise

6. What is .then ?

It’s an asynchronous built in JS method

7. let’s just get one store object instead of all the stores

        handleRequest("http://localhost:3000/stores/1")
.then(stores => console.log(stores))

8. We can take advantage of function we built earlier, renderHeader.

//all the way in the bottom   
//renderHeader(bookStore) //not using the render Header any longer
        handleRequest("http://localhost:3000/stores/1")
.then(stores => renderHeader(stores))

9. We can also take advantage of the footer function as well

        handleRequest("http://localhost:3000/stores/3")
.then(store => {
renderHeader(store)
renderFooter(store)
})

10. let’s add error handling method

//Handle GET request
function handleRequest(url){
return fetch(url)
.then(resp => resp.json())
}

//Render Response Data
handleRequest("http://localhost:3000/stores/3")
.then(store => {
renderHeader(store)
renderFooter(store)
})
.catch(err => console.error(err))

11. Let’s write a new request for books

shorten — -> one line

//Render Response Data => books
handleRequest("http://localhost:3000/books/")
.then(books => books.forEach(renderBookCard))
.catch(console.error)

longer explanation

        //Render Response Data => books
handleRequest("http://localhost:3000/books/")
.then(books => {
console.log(books)
books.forEach((book) => {
console.log(book)
renderBookCard(book)})
})
.catch(console.error)

12. This is it for today’s lecture, retrieving the data

13. Let’s render stores and create cards

        //Render Response Data => books
handleRequest("http://localhost:3000/books/")
.then(books => books.forEach(renderBookCard))
.catch(console.error)


//Render Response Data => stores
handleRequest("http://localhost:3000/stores/")
.then(stores => stores.forEach(renderStoreCard))
.catch(console.error)


// Render Store Card
function renderStoreCard(store){
//create necessary elements

//populate elements with appropriate content


//appending to the DOM as necessary

}

14. create DOM Node elements

        // Render Store Card
function renderStoreCard(store){
//create necessary elements
const storeCard = document.createElement('li')
const storeName = document.createElement('h3')
const storeLocation = document.createElement('p')
const storeHours = document.createElement('p')

//populate elements with appropriate content

//appending to the DOM as necessary


}

15. populate elements w appropriate content

        //Render Store Card
function renderStoreCard(store){
//create necessary elements
const storeCard = document.createElement('li')
const storeName = document.createElement('h3')
const storeLocation = document.createElement('p')
const storeHours = document.createElement('p')

//populate elements with appropriate content
storeName.textContent = store.name
storeLocation.textContent = store.location
storeHours.textContent = store.hours

//appending to the DOM as necessary


}

16. append

            //populate elements with appropriate content
storeName.textContent = store.name
storeLocation.textContent = store.location
storeHours.textContent = store.hours

//appending to the DOM as necessary
storeCard.append(storeName, storeLocation, storeHours)
storeContainer.append(storeCard)
}

17. create a new element so we can append the store card

index.html

18. select the DOM node element and append the store card onto the container

       const storeContainer = document.querySelector("#stores")

//Render Store Card
function renderStoreCard(store){
//create necessary elements
const storeCard = document.createElement('li')
const storeName = document.createElement('h3')
const storeLocation = document.createElement('p')
const storeHours = document.createElement('p')

//populate elements with appropriate content
console.log(store)
storeName.textContent = store.name
storeLocation.textContent = store.location
storeHours.textContent = store.hours

//appending to the DOM as necessary
storeCard.append(storeName, storeLocation, storeHours)
storeContainer.append(storeCard)
}

19. add class name to get the styling right

        function renderStoreCard(store){
//create necessary elements
const storeCard = document.createElement('li')
const storeName = document.createElement('h3')
const storeLocation = document.createElement('p')
const storeHours = document.createElement('p')

storeCard.className = 'list-li'

//populate elements with appropriate content
console.log(store)

done

or

20. add event handler

            //appending to the DOM as necessary 
storeCard.append(storeName, storeLocation, storeHours)
storeContainer.append(storeCard)


//add event handling behaviors
storeCard.addEventListener('click',()=> {
console.log("clicked")
handleRequest(`http://localhost:3000/stores/${store.id}`)
.then((store) => {
renderHeader(store)
renderFooter(store)
})
.catch(console.error)
})

--

--