Skip to content

HTML page is not showing the info I need from json file

My script, this should be showing the Name of game computers in html but it does not, I have been trying so much andI betit will just be something stupid that is wrong or missing Console says : TypeError: data is undefined

The console does show me retrieving the data works

"use strict";

window.addEventListener("load", Init);

function Init() {
  .then(function(response) { return response.json();  })
  .then(data => console.log(data))
  .catch(err => console.log(err));

 window.addEventListener("load", tester);

My function to show data on screen (shows nothing)

function tester(data)
  let div = document.getElementById("test");

  for (var i = 0; i < data.length; i++) {
    let article = document.createElement("h1");
    article.innerHTML = 'Name: ' + data.GameComputers[0].Name;

In HTML I just have this in my body
<div id="test"></div>



console.log returns undefined

.then(data => console.log(data))

Your first then returns the return value of console.log which is undefined.

So your second then recieves undefined as its data.

Don’t use multiple then callbacks here.


The JSON doesn’t consist of an array

The JSON you are looking at returns an object.

It doesn’t have a length.

for (var i = 0; i < data.length; i++) {

… is going to fail immediately.

You’ve got data.GameComputers[0] so I’m guessing you want to loop over GameComputers so:

  1. Check the length of that: i < data.GameComputers.length
  2. Make use of i when you read it: data.GameComputers[i].Name;
User contributions licensed under: CC BY-SA
2 People found this is helpful