JSON AJAX Http request

Question

I am working with a JSON file that I have, and I am linking it in my JavaScript. I am trying to get it requested through AJAX to show up on my console.log, but I am just getting null for my readystatechange function. What am I doing wrong?

Also to better clarify I am doing this for my course and ideally what my goal is; I have a json file that I created (myjson.com), I have that URL its in my JavaScript, and I am trying to get that json url to update to my JavaScript so when I do a console.log it shows up the values of the objects from the json. Here's my code:

<div id="btn1"> Update </div>
<div id="output"></div>

<script>

var output = document.getElementById("output");

document.getElementById("btn1").onclick = function () {
    var a = newXMLHttpRequest();
    a.onreadystatechange = function () {

    }
    a.open("GET", "https://api.myjson.com/bins/z79bt", true);
    a.send();
};

</script>

UPDATE

Code from the comment:

var output = document.getElementById("output");
document.getElementById("btn1").onclick = function () { 
  var a = new XMLHttpRequest(); 
  a.onreadystatechange = function () { 
    if(this.readyState == 4) { 
      var myObj = this.responseText; 
    } 
    console.log(a); 
  } 
  a.open("GET", "api.myjson.com/bins/z79bt";, true); 
  a.send(); 
};

Shomz · Accepted Answer · 2017-05-08 21:43:31Z

3

Two issues:

you're missing a space in newXMLHttpRequest
you're not doing anything inside the state change callback
(third: you're also not populating the output div)

See the live example here:

var output = document.getElementById("output");

document.getElementById("btn1").onclick = function () {
    var a = new XMLHttpRequest();
    a.onreadystatechange = function () {
      if(a.readyState === XMLHttpRequest.DONE && a.status === 200) {
        console.log(a.responseText);
        output.textContent = a.responseText;
      }
    }
    a.open("GET", "https://api.myjson.com/bins/z79bt", true);
    a.send();
};

<div id="btn1"> Update </div>
<div id="output"></div>

UPDATE

Fixed code from the comment:

var output = document.getElementById("output");
document.getElementById("btn1").onclick = function () { 
  var a = new XMLHttpRequest(); 
  a.onreadystatechange = function () { 
    if(this.readyState == 4) { 
      var myObj = this.responseText; 
      console.log(myObj); 
    } 
    
  } 
  a.open("GET", "https://api.myjson.com/bins/z79bt", true); 
  a.send(); 
};

<div id="btn1"> Update </div>
<div id="output"></div>

edited May 8, 2017 at 21:43

answered May 8, 2017 at 21:30

Shomz

37.7k4 gold badges61 silver badges87 bronze badges

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

3 Comments

Peter Tran Over a year ago

Hey thanks you are right I forgot the space between the new XMLHttpRequest I had one more questions your method with the if statement works and I see that I am getting back my json objects I am following a book step by step and I am still not getting information back when I am doing it this way can you see if anything is wrong?

Peter Tran Over a year ago

var output = document.getElementById("output"); document.getElementById("btn1").onclick = function () { var a = new XMLHttpRequest(); a.onreadystatechange = function () { if(this.readyState == 4) { var myObj = this.responseText; } console.log(a); } a.open("GET", "api.myjson.com/bins/z79bt", true); a.send(); };

Shomz Over a year ago

@user7656142 myObj will live only inside the function scope. You're logging the variable a instead of myObj.

Collectives™ on Stack Overflow

JSON AJAX Http request

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related