JS 008 — CRUD GET Communicating With The Server

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)
            })