Kevin Powell - Community•9mo ago

Fetch API (JavaScript)

const api = "https://95northboutique.store/collections/new-arrivals/products/san-francisco-giants-2000-inaugural-season.json";


fetch(api)
    .then(response => console.log(response.json()))
    .then(data => {
        console.log(data.title)
    })
    .catch(err => console.log("error:" + err))

const api = "https://95northboutique.store/collections/new-arrivals/products/san-francisco-giants-2000-inaugural-season.json";


fetch(api)
    .then(response => console.log(response.json()))
    .then(data => {
        console.log(data.title)
    })
    .catch(err => console.log("error:" + err))

I'm attempting to call a URL and return data. Running the original console log (response) without the data line returns the promise result object of product. However, when I call data.title, I'm expecting it to return ("SAN FRANCISCO GIANTS 2000 INAUGURAL SEASON"), but it's not able to read these properties as title is undefined?

5 Replies

Matt•9mo ago

I've also tried: console.log(data.product.title) and console.log(data[0].title)

MarkBoots•9mo ago

you are returning a console log, not the response.json() itself and yes, the title is in product

const api = "https://95northboutique.store/collections/new-arrivals/products/san-francisco-giants-2000-inaugural-season.json";

fetch(api)
    .then(response => response.json())
    .then(data => {
        console.log(data.product.title)
    })
    .catch(err => console.log("error:" + err))

const api = "https://95northboutique.store/collections/new-arrivals/products/san-francisco-giants-2000-inaugural-season.json";

fetch(api)
    .then(response => response.json())
    .then(data => {
        console.log(data.product.title)
    })
    .catch(err => console.log("error:" + err))

Matt•9mo ago

I closed the other post, I apologize didn't see this Just out of curiosity, why does json() function need to be called despite url returning json?

MarkBoots•9mo ago

.json() converts it to a native JavaScript object

Matt•9mo ago

okay cool makes sense

Gaming

Programming

Fetch API (JavaScript)