Using JS return in another script

Question

I am trying to return a peer comparison table for stocks. How it works is I have one script asking what the comparable companies are for AAPL, and another function that takes that group and grabs the quick ratio for that group, however, I can not seem to figure out how to get the second script to use the responses of the first script.

Script 1 to grab peers.

 <script>
  function peerGroup() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var peerGroup = JSON.parse(this.responseText);
      var peer1 = document.getElementById("peer1").innerHTML = peerGroup[0];
      document.getElementById("peer2").innerHTML = peerGroup[1];
      document.getElementById("peer3").innerHTML = peerGroup[2];
      document.getElementById("peer4").innerHTML = peerGroup[3];
    }

  };
  xhttp.open("GET", "https://cloud.iexapis.com/stable/stock/aapl/peers?token=pk_6925213461cb489b8c04a632e18c25dd", true);
  xhttp.send(); 
  };

</script>

Script 2, use script 1 return for ratio

<script>
var peer = peerGroup.peer1
function peerAnalysis() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      var peerAnalysis = JSON.parse(this.responseText);
      document.getElementById("peer1-quickRatio").innerHTML = peerAnalysis[0]["quickRatio"].toFixed(2);
    }
  };
  xhttp.open("GET", "https://fmpcloud.io/api/v3/ratios/"+peer+"?period=quarter&apikey=4a913b138c66a8ba8885339480785676", true);
  xhttp.send();
};

</script>

HTML

<div id=peer1>
</div>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function(event) {
      peerGroup();
    },true);
    </script>
<div id=peer1-quickRatio>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
  peerAnalysis();
},true);
</script>

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — CherryDT, May 18 '20 at 21:59

score 1 · Answer 1 · answered May 18 '20 at 22:04

You need to store peerGroup in a global variable, like:

window.peerGroup = peerGroup

Then access it like

var peer = window.peerGroup.peer1

NOTE: you are loading two scripts that perform async operations. peerGroup may not be available by the time your second script loads. You can patch it by setting a timeout on your second script. Or - the proper solution - emit an event when you get the peerGroup

score 0 · Answer 2 · answered May 18 '20 at 22:09

Your code contains few bad practices. You can easily incur in race conditions and side effects. My suggestion is definitely to declare a state and change the page accordingly, something like react (maybe redux?) do. You can handle async events and predict what's going on. A plain js implementation like that can become a nightmare, you are even handling DOM directly, this mix can definitely be error prone. That's should be avoided when possible, especially if you expect to make your architecture more complex than that.

https://redux.js.org/advanced/async-actions/

score 0 · Answer 3 · answered May 21 '20 at 20:10

0

I was able to solve the problem. While I am unsure if it is the best practice for such a thing. I have set the peerGroups to be stored in the sessionStorage and then dynamically call them back on an asynchronous load of the peerAnalysis script.

answered May 21 '20 at 20:10

ethor11

37
7

Using JS return in another script

3 Answers3