PUT request not updating JSON when using a GET request, though it says it's successful?

Question

(FYI, I'm using Jsonbin.io)
I have this code:

// #1
var req2 = new XMLHttpRequest();
req2.onreadystatechange = () => {
  if (req2.readyState == XMLHttpRequest.DONE) {
    alert(req2.responseText);
  } 
};

req2.open("GET", "https://api.jsonbin.io/b/5ed1530b79382f568bcf5662", true);
req2.setRequestHeader("secret-key", "ProbablyNoProblemInTheAPIkey");
req2.send();

// #2

let req = new XMLHttpRequest();

req.onreadystatechange = () => {
  if (req.readyState == XMLHttpRequest.DONE) {
  alert(req.responseText);
  }
};

req.open("PUT", "https://api.jsonbin.io/b/5ed1530b79382f568bcf5662", true);

req.setRequestHeader("secret-key", "ProbablyNoProblemInTheAPIkey");
req.setRequestHeader("Content-Type", "application/json");
req.send('{"Sample": "Hello World"}');

Here is an example of my code functioning:

<script language="javascript">
  
document.write(unescape('%3C%21%44%4F%43%54%59%50%45%20%68%74%6D%6C%3E%0A%3C%68%74%6D%6C%3E%0A%20%20%3C%68%65%61%64%3E%0A%20%20%20%20%3C%6D%65%74%61%20%63%68%61%72%73%65%74%3D%22%75%74%66%2D%38%22%3E%0A%20%20%20%20%3C%6D%65%74%61%20%6E%61%6D%65%3D%22%76%69%65%77%70%6F%72%74%22%20%63%6F%6E%74%65%6E%74%3D%22%77%69%64%74%68%3D%64%65%76%69%63%65%2D%77%69%64%74%68%22%3E%0A%20%20%20%20%3C%74%69%74%6C%65%3E%72%65%70%6C%2E%69%74%3C%2F%74%69%74%6C%65%3E%0A%20%20%20%20%3C%6C%69%6E%6B%20%68%72%65%66%3D%22%73%74%79%6C%65%2E%63%73%73%22%20%72%65%6C%3D%22%73%74%79%6C%65%73%68%65%65%74%22%20%74%79%70%65%3D%22%74%65%78%74%2F%63%73%73%22%20%2F%3E%0A%20%20%3C%2F%68%65%61%64%3E%0A%20%20%3C%62%6F%64%79%3E%0A%20%20%20%20%3C%73%63%72%69%70%74%20%3E%0A%0A%0A%0A%0A%2F%2F%20%23%31%0A%76%61%72%20%72%65%71%32%20%3D%20%6E%65%77%20%58%4D%4C%48%74%74%70%52%65%71%75%65%73%74%28%29%3B%0A%72%65%71%32%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20%69%66%20%28%72%65%71%32%2E%72%65%61%64%79%53%74%61%74%65%20%3D%3D%20%58%4D%4C%48%74%74%70%52%65%71%75%65%73%74%2E%44%4F%4E%45%29%20%7B%0A%20%20%20%20%61%6C%65%72%74%28%72%65%71%32%2E%72%65%73%70%6F%6E%73%65%54%65%78%74%29%3B%0A%20%20%7D%20%0A%7D%3B%0A%0A%72%65%71%32%2E%6F%70%65%6E%28%22%47%45%54%22%2C%20%22%68%74%74%70%73%3A%2F%2F%61%70%69%2E%6A%73%6F%6E%62%69%6E%2E%69%6F%2F%62%2F%35%65%64%31%35%33%30%62%37%39%33%38%32%66%35%36%38%62%63%66%35%36%36%32%22%2C%20%74%72%75%65%29%3B%0A%72%65%71%32%2E%73%65%74%52%65%71%75%65%73%74%48%65%61%64%65%72%28%22%73%65%63%72%65%74%2D%6B%65%79%22%2C%20%22%24%32%62%24%31%30%24%35%50%43%5A%57%2F%2E%35%5A%41%74%62%7A%39%72%72%37%4B%41%73%64%75%35%70%67%58%56%2F%68%79%38%32%50%6F%61%36%45%4C%50%77%49%70%76%6E%54%6A%6D%4E%78%76%61%69%47%22%29%3B%0A%72%65%71%32%2E%73%65%6E%64%28%29%3B%0A%0A%2F%2F%20%23%32%0A%0A%0A%6C%65%74%20%72%65%71%20%3D%20%6E%65%77%20%58%4D%4C%48%74%74%70%52%65%71%75%65%73%74%28%29%3B%0A%0A%72%65%71%2E%6F%6E%72%65%61%64%79%73%74%61%74%65%63%68%61%6E%67%65%20%3D%20%28%29%20%3D%3E%20%7B%0A%20%20%69%66%20%28%72%65%71%2E%72%65%61%64%79%53%74%61%74%65%20%3D%3D%20%58%4D%4C%48%74%74%70%52%65%71%75%65%73%74%2E%44%4F%4E%45%29%20%7B%0A%20%20%61%6C%65%72%74%28%72%65%71%2E%72%65%73%70%6F%6E%73%65%54%65%78%74%29%3B%0A%20%20%7D%0A%7D%3B%0A%0A%72%65%71%2E%6F%70%65%6E%28%22%50%55%54%22%2C%20%22%68%74%74%70%73%3A%2F%2F%61%70%69%2E%6A%73%6F%6E%62%69%6E%2E%69%6F%2F%62%2F%35%65%64%31%35%33%30%62%37%39%33%38%32%66%35%36%38%62%63%66%35%36%36%32%22%2C%20%74%72%75%65%29%3B%0A%0A%72%65%71%2E%73%65%74%52%65%71%75%65%73%74%48%65%61%64%65%72%28%22%73%65%63%72%65%74%2D%6B%65%79%22%2C%20%22%24%32%62%24%31%30%24%35%50%43%5A%57%2F%2E%35%5A%41%74%62%7A%39%72%72%37%4B%41%73%64%75%35%70%67%58%56%2F%68%79%38%32%50%6F%61%36%45%4C%50%77%49%70%76%6E%54%6A%6D%4E%78%76%61%69%47%22%29%3B%0A%72%65%71%2E%73%65%74%52%65%71%75%65%73%74%48%65%61%64%65%72%28%22%43%6F%6E%74%65%6E%74%2D%54%79%70%65%22%2C%20%22%61%70%70%6C%69%63%61%74%69%6F%6E%2F%6A%73%6F%6E%22%29%3B%0A%72%65%71%2E%73%65%6E%64%28%27%7B%22%53%61%6D%70%6C%65%22%3A%20%22%48%65%6C%6C%6F%20%57%6F%72%6C%64%22%7D%27%29%3B%0A%0A%20%20%20%20%3C%2F%73%63%72%69%70%74%3E%0A%20%20%3C%2F%62%6F%64%79%3E%0A%3C%2F%68%74%6D%6C%3E'));
  
</script>

The PUT request is supposedly successful, but when making a GET request to access the updated version, the JSON seems the same. What is going wrong?
It seems like the PUT request was done successfully, as req.status was 200, so I don't think you should focus on that.

`XMLHttpRequest.DONE` says it has finished, but it doesn't say whether it finished with success or with failure. — Daniel W., May 29 '20 at 20:06
@Daniel W. Well, the XHR.responseText from the API said it's successful, but I could be wrong. Let me see. — Someone, May 29 '20 at 20:12
That is not the problem, unfortunately. Req.status was 200, so it was successful. — Someone, May 29 '20 at 20:18
"the JSON seems the same" Please show exact before and after values. Or better, include full request/response parts (headers). It's not transparent to me. Your example code is using GET first and then PUT. — Daniel W., May 29 '20 at 20:25
Since the code is executing asynchronoulsy, where's the gurantee which one is gonna execute first? Btw did you try putting the `GET` request inside the success of `PUT`? — ABGR, May 29 '20 at 20:30
Does this answer your question? [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) — Heretic Monkey, May 29 '20 at 20:40

score 0 · Answer 1 · answered May 29 '20 at 20:35

0

onreadystatechange executes asynchrnously. So, first there's no guarantee that your GETexecutes only after PUT has been successfully completed.

Second, PUT anyway has been written after the GET request in your code.

So, You can try putting req2.send();of the GET request inside the 'Success' of PUT

 req.onreadystatechange = () => {
      if (req.readyState == XMLHttpRequest.DONE) {
          req2.send(); //Try making the GET request once PUT is completed
        //This is gonna execute asynchronously in both the cases 
      } 
    };

answered May 29 '20 at 20:35

ABGR

4,631
4
27
49

Can you give me an example, for example on JSfiddle? I tried this myself (source code: https://repl.it/@Kudos/BackEndOnFrontEnd#index.html) and it didn't work. You seem to have a lot of experience, so I assume that I did something wrong, which is why I would like an example. – Someone May 29 '20 at 20:50
Just find whatever bug there is in this code: https://jsfiddle.net/hgmn7u6o/ Here are the docs for the API: https://jsonbin.io/api-reference/bins/update – Someone May 29 '20 at 20:58
The response of the `GET` is `{"message":"Invalid secret-key provided","success":false}`. So this will start working once you provide a valid secret-key – ABGR May 29 '20 at 21:26
According the doc `secret-key is an optional header. It is required when you need to Read a Private record.` But since you're reading. private record, you need to provide this key. When I tried without the key, it said, `{"message":"Need to provide a secret-key to READ private bins","success":false}` – ABGR May 29 '20 at 21:29
Yes, I know this. But what does this have to do with the answer? – Someone May 30 '20 at 01:21
I thought that was the problem? That after you PUT some data, you’re unable to GET the updated list. Isn’t this the problem? – ABGR May 30 '20 at 04:24
Yes, this is the problem. But the secret key has nothing to do with it. Even if it is, I can just turn it into a public "bin." – Someone May 30 '20 at 15:50
Did you try as I said? What were your observations? – ABGR May 30 '20 at 19:44
I did try as you said on repl.it, but the problem persisted. To simplify things even further, in the JSfiddle I didn't even use a GET request, as that was part of the problem according to your solution, but rather I put a link to the JSON file (and made it public because then one would need to see the JSON). – Someone May 30 '20 at 20:11

PUT request not updating JSON when using a GET request, though it says it's successful?

1 Answers1