FETCH AND ASYNC JAVASCRIPT

I have found async and fetch to be particularly frustrating to describe. I understand the process overall, but continue to not find the right words for the process. So here goes a description using my own fetch request in my Phase 1 Final Project.

First I am grabbing my button 'btnGet' with the querySelector, then attaching a 'click' event to that button which invokes the 'getMovies' function.

const fetchBtn = document.querySelector('#btnGet');fetchBtn.addEventListener('click', getMovies);let movies; 

At that point the code block within the 'getMovies' function fires. First, the fetch method makes a request to the API or db.json file being utilized. That request returns a promise. This promise is an object which needs to be converted to a usable format, so in the first .then the '(response)' is from the promise is returned (or object) is converted into json within the arrow function.

function getMovies() {    fetch(`http://localhost:3000/movies`)        .then((response) => response.json())        .then((data) => {            movies = data;

Then, in the second '.then' the new, readable data is used in some way through the new arrow function code block. I want to take this data, movie objects with multiple key/ value pairs, and use that data in some way. Because the button is linked to the click event, I want to print them to the DOM client side via the "result" <div>that is nested within my API SEARCH BUTTON <div>.

I declared 'movies' with let in the global scope. Then am initializing it in the scope of the 'getMovies' function so the parameter of 'data'- my converted json data, can be utilized with the keyword of 'movies' later on.

Then I grabbed the 'result' <div> so I could use it for my iterator later on. This is stored in the variable 'result'. Using dot notation I then assign an empty string to result's textContent.

 let result = document.getElementById('result');            result.textContent = '';

Lastly, I returned to the 'movies' variable (from the data parameter returned from the json conversion) and attach a forEach method to it with a parameter of (movie). Within this code block the forEach iterates through each of the 'movies', inserts the new innerHTML with a <p> tag and prints all of the results to the client side with the <div> id="apisearch".

           movies.forEach((movie) => {                result.innerHTML +=                    `<p class="movieItem" >${movie.title} is a(n) ${movie.genre} movie that was released in ${movie.release}</p>`            })        })}

I think writing this out helped me feel more comfortable explaining the fetch process. Once it was broken into parts, it made more sense and I could see each action taking place and why.