Fetch JSON function not working properly. JavaScript [duplicate]

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
– Andy, Commented May 21, 2023 at 22:14
@Andy The function is already an async function, and I am awaiting for the response.json(); — Pete21
– Pete21, Commented May 21, 2023 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
– Andy, Commented May 21, 2023 at 22:17

Vidar S. Ramdal · Accepted Answer · 2023-05-21 22:22:34Z

2

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>

edited May 21, 2023 at 22:22

answered May 21, 2023 at 22:17

Vidar S. Ramdal

1,2721 gold badge15 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pete21 Over a year ago

No, the code in the snippet above is using an example json file, which contains the properties .title and .body

Pete21 Over a year ago

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.

Collectives™ on Stack Overflow

Fetch JSON function not working properly. JavaScript [duplicate]

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related