Can't get JSON out of URL with JavaScript

Question

I've recently started to learn JavaScript, my learning process was going smoothly until I got to JSON, when I started trying to get a JSON out of a URL I got stuck real bad, I've tried loads of methods I found here, and loads of different URL's and nothing seems to work. Well cutting to the chase, this is what I've got:

I am using IIS to create a local server, and I'm running my script from there;
I created a simple JSON file on JSONbin.io;
I'm trying to access it using the code I got from JSONbin's website;
I created some console.logs for debugging;
I found out that although the console doesn't point out any error, the request function never runs;
MYKEY is the secret key i got from JSONbin.io

If anyone could shed a light on this matter, or simple providing a simple code that would work for me, it would help a lot.

<p> test </p>

<script>
let req = new XMLHttpRequest();

req.onreadystatechange = () => {
  if (req.readyState == XMLHttpRequest.DONE) {
    console.log("1");   
   console.log(req.responseText.name);
  }
};

req.open("POST", "http://api.jsonbin.io/b/5ec04a83a47fdd6af1645b86", true);
console.log("2");
req.setRequestHeader("Content-Type", "application/json");
req.setRequestHeader("secret-key", "MYKEY");
console.log("3");

</script>

Cid · Accepted Answer · 2020-05-16 21:50:31Z

4

You've simply forgot to send() the request

<p> test </p>

<script>
let req = new XMLHttpRequest();

req.onreadystatechange = () => {
  if (req.readyState == XMLHttpRequest.DONE) {
    console.log("1");   
   console.log(req.responseText.name);
  }
};

req.open("POST", "http://api.jsonbin.io/b/5ec04a83a47fdd6af1645b86", true);
console.log("2");
req.setRequestHeader("Content-Type", "application/json");
req.setRequestHeader("secret-key", "MYKEY");

req.send(); // <--------------------- Check this


console.log("3");

</script>

answered May 16, 2020 at 21:50

Cid

15.3k4 gold badges33 silver badges49 bronze badges

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

Comments

Yak O'Poe · Accepted Answer · 2020-05-16 22:05:57Z

2

In order to execute your request you missed req.send() at the end. You have to check the console and the network tab in the inspector, there you will see if you have other problems.

Be aware that in some browsers like Firefox you can be blocked with the message "Blocked loading mixed active content". That's happening when you are in a HTTPS page and you execute your script using a HTTP url (like you did). That is a security action in order to avoid attacks like MITM due to posting potentially secure content (your key or other stuff).

edited May 16, 2020 at 22:05

answered May 16, 2020 at 21:57

Yak O'Poe

8225 silver badges15 bronze badges

Comments

kirti kaushal · Accepted Answer · 2020-05-17 04:33:02Z

Yup you simply forget send()

const req = new XMLHttpRequest()
req.onreadystatechange = function () {
  // In local files, status is 0 upon success in Mozilla Firefox
  if(req.readyState === XMLHttpRequest.DONE) {
    var status = req.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // The request has been completed successfully
      console.log(req.responseText);
    } else {
      // Oh no! There has been an error with the request!
    }
  }
};
req.open("POST", "http://api.jsonbin.io/b/5ec04a83a47fdd6af1645b86", true);
console.log("2");
req.setRequestHeader("Content-Type", "application/json");
req.setRequestHeader("secret-key", "MYKEY");
console.log("3");
req.send(); // try this

Collectives™ on Stack Overflow

Can't get JSON out of URL with JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related