Fetch JSON function not working properly. JavaScript

Question

I have created a function named fetchJSONData() that is supposed to return a JavaScript object from the URL you give it, and when you console.log the output, it works as expected, but when I try to access a property from the returned object, it shows undefined as the property value.

Here is the small json file I am using:

{
    "headerText": "Lorem Ipsum",
    "subText": "lorem ipsum dolor sit amet....."
}

Here is a very basic example code snippet:

async function fetchJSONData(url) {
    var response = await fetch(url);
    var data = await response.json();
    console.log(data);
    return data;
}

var textTest = fetchJSONData("https://jsonplaceholder.typicode.com/posts/1");
var test01 = document.getElementById("test01");
var test02 = document.getElementById("test02");

window.onload = function() {
    // Returns undefined
    test01.innerText = textTest.title;
    test02.innerText = textTest.body;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1 id="test01">blank</h1>
    <p id="test02">blank</p>
</body>
</html>

You can see when I try to access the variables, the html elements show the value is undefined.

`fetchJSONData` is `async` and returns a _promise_. You can either `await` it (by calling it within an `async` function), or make it "thenable": `fetchJSONData(endpoint).then(data => ...`. — Andy, May 21 '23 at 22:14
@Andy The function is already an async function, and I am awaiting for the response.json(); — Pete21, May 21 '23 at 22:15
Yes, and you have to `await` it: `const data = await fetchJSONData(endpoint)`. But to do that you either need to place the code for that inside another `async` function, or make it thenable. — Andy, May 21 '23 at 22:17

Vidar S. Ramdal · Accepted Answer · 2023-05-21T22:22:34.273

First of all, you are trying to access textTest.title and textTest.body. The JSON structure in your JSON file does not contain the title and body properties, so they will be undefined.

Your code snippet, on the other hand, refers to a URL with a different JSON structure. If this is what you're using, the property names should be OK.

But, when the window.onload event handler runs, the promise returned from fetchJSONData will not have resolved (also, it returns a promise, so you would have to await it.). You can solve this by moving your DOM update logic into the fetchJSONData function:

async function fetchJSONData(url) {
    var response = await fetch(url);
    var data = await response.json();
    var test01 = document.getElementById("test01");
    var test02 = document.getElementById("test02");
    test01.innerText = data.title;
    test02.innerText = data.body;
    console.log(data);
    return data;
}

var textTest = fetchJSONData("https://jsonplaceholder.typicode.com/posts/1");

window.onload = function() {
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <h1 id="test01">blank</h1>
    <p id="test02">blank</p>
</body>
</html>

No, the code in the snippet above is using an example json file, which contains the properties .title and .body — Pete21, May 21 '23 at 22:19
Thanks, this worked, but instead of moving the window.onload logic into the function, I will add a new parameter that takes in a function that will execute after the response has been resolved. — Pete21, May 21 '23 at 22:26

Fetch JSON function not working properly. JavaScript

1 Answers1