Class 26 Flashcards
Explain what’s going on here
fetch(“https://dog.ceo/api/breeds/image/random”) // api for the get request
.then(response => response.json())
.then(data => {
console.log(data)
document.querySelector(“img”).src = data.message})
Using fetch api to fetch data from dog.ceo api
. then() is a method is used to handle the response, converting it to JSON using the json() method. The second then() logs the retrieved data to the console, and display image (data.message) into my html document (into image tag)
What does fetch() do in fetch API?
The fetch() method (function) starts the process of fetching a resource from the network, returning a promise that is fulfilled once the response is available.
The fetch() function is at the core of this API, and it takes one mandatory argument – the URL of the resource you want to fetch.
For Dog API (random image), when I console log data, it logs {message: “…” status: “…”}. What does it mean?
It means data is an object with 2 properties (message and status)
What is url?
Universal Resource Locator; It is an address which shows where to find a document or resource
For Dog API (random image), message property of data (data.message) is https://…jpg
What can I do with it?
data.message is an image url.
I can use this to display an image file.
Ex.
document.querySelector(“img”).src = data.message
What is the syntax for selecting a random element from an array?
Given name of an array is array.
array[Math.floor(Math.random() * array.length)]
What does Math.random()
return?
Math.random() returns a random number between 0 (inclusive) and 1 (exclusive).
What does Math.floor() do?
Math.floor() is used to round down the generated index to the nearest integer.
What are symbols of back-ticks?
Back-ticks are ...
Don’t get confused with single quotes ‘…’
What are template literals used for and its syntax?
- multi-line strings
- let text = ` Hi,
How are
you? ‘ - string interpolation
-${...} - quotes inside strings (allow for both single and double quotes inside a string)
-He's often called "Johnny"
Uncaught TypeError: Cannot read properties of null (reading ‘addEventListener’)” error in a basic JS button
Your code seems to be executed even before the DOM getting loaded into the browser.
Put your script import at the end of your HTML’s body
<html>
<body>
.........
</body>
</html>
What is this error and how do you resolve it?
Access to fetch at ‘file:///Users…’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
I don’t know what kind of error this is but adding https:// before www in the url resolves this error
Look at this code and explain to me why method 1 and 2 work but not 3.
fetch(“https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita”)
.then(response => response.json())
.then(data => {
console.log(data)
console.log(data.drinks[1].strDrink)
1. let x = data.drinks[1].strDrink
document.querySelector("p").innerText = x
2. document.querySelector("p").innerText = data.drinks[1].strDrink
3. data.drinks[1].strDrink = document.querySelector("p").innerText })
For methods 1 and 2, you’re setting the inner text of the <p> element to the name of the cocktail (data.drinks[1].strDrink).
For method 3, you’re attempting to assign the value of the <p> element’s inner text to data.drinks[1].strDrink. However, this approach doesn’t work because you’re trying to modify the data object returned by the API. The data object is the response from the API, and it’s generally not a good practice to modify it directly.
fetch(“https://www.thecocktaildb.com/api/json/v1/1/search.php?s=margarita”)
.then(response => response.json())
.then(data => {
console.log(data)
data.drinks.forEach((object) => {
let p = document.createElement(“p”)
p.innerText = object.strDrink
document.body.appendChild(p)
})
})
