why does my javascript code read a property of null on this json data?

Question

EDIT: sorry, had the code ridden with errors. changed it now

Ive been trying to extract some JSON data from a github link to put it in a html file, but everytime I try to do so (with the code below), I get an Uncaught TypeError: cannot read property "value" of null. This even though "value" (in the Json file) certainly is not null.

What is going wrong here?

Thanks

you can check out the json file i put on github https://github.com/BearsAreFriendly/PolitiekeHelderheid/blob/master/kamerleden.json . I am quite certain that "value" has been defined

  var section = document.querySelector("section");
  var requestURL = 'https://github.com/BearsAreFriendly/PolitiekeHelderheid/blob/master/kamerleden.json';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();

  request.onload = function(){
    var phdata = request.response;
    showKamerleden(phdata);
  }
  function showKamerleden(jsonObj) {
  var kamerleden = jsonObj["value"];
  for (var i = 0; i < kamerleden.length; i++) {
      var myPara1 = document.createElement('p');
      myPara1.textContent = kamerleden[i].Id;
      section.appendChild(myPara1);
  }
  }

this should print out the id's. instead I get my mentioned error code

The error means that request.response is null. Try using JSON.parse(request.responseText) — Barmar
– Barmar, Commented Jul 3, 2019 at 17:29
can you create a jsfiddle.net for this one, should not have been the issue with your jsonObj being null — Sunil Lama
– Sunil Lama, Commented Jul 3, 2019 at 17:45

Kate Orlova · Accepted Answer · 2019-07-03 18:05:32Z

1

I believe you may not actually be receiving any JSON data from GitHub, but HTML. When my browser requests a GitHub page the response content type is Content-Type: text/html. Your request URL should respond with JSON in order for it to be usable. When you request the GitHub URL you are likely getting other stuff (such as HTML), but not JSON.

For example, this url serves JSON data only: https://my-json-server.typicode.com/typicode/demo/posts

It has Content-Type: application/json when I inspect the page in dev tools under the network section

Modifying your code to add the url below works perfectly.

var section = document.querySelector("section");
  var requestURL = 'https://my-json-server.typicode.com/typicode/demo/posts';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  
  request.onload = function(){
    var phdata = request.response;
    /* showKamerleden(phdata); */
  document.write(JSON.stringify(phdata) ) 

  }

edited Jul 3, 2019 at 18:05

Kate Orlova

3,3585 gold badges15 silver badges37 bronze badges

answered Jul 3, 2019 at 17:53

tobay

263 bronze badges

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

1 Comment

tobay Over a year ago

No problem, glad I could help.

plsankar · Accepted Answer · 2019-07-03 17:43:22Z

1

try this

var kamerledens = jsonObj.value;

instead of

var kamerledens = jsonObj["value"];

and also you should use a loop to go through all ids

function showKamerleden(jsonObj) {
var kamerledens = jsonObj.value;
for (var i = 0; i < kamerledens.length; i++) {
    var myPara1 = document.createElement('p');
    myPara1.textContent = kamerledens[i].Id;
    section.appendChild(myPara1);
}
}

Edited:

Try moving

  request.send();

after the onload function

edited Jul 3, 2019 at 17:43

answered Jul 3, 2019 at 17:33

plsankar

4921 gold badge5 silver badges11 bronze badges

2 Comments

thelegend27 Over a year ago

hi, yeah thanks for correcting my mistake with the loop. this however still gives the error that Uncaught TypeError: Cannot read property 'value' of null at showKamerleden at XMLHttpRequest.request.onload

plsankar Over a year ago

@thelegend27 hi, check my new answer

Programmer · Accepted Answer · 2019-07-03 18:01:51Z

0

It isn't "value" that it is null, jsonObj is null.

Hence the error 'cannot read property "value" OF null'

I suggest you output and analyse the request in the callback

console.log(request)

answered Jul 3, 2019 at 18:01

Programmer

362 bronze badges

Collectives™ on Stack Overflow

why does my javascript code read a property of null on this json data?

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related