CODEWITHSUNDEEP
javascripthtmlreturn-valuekey-value
ethor11
ethor11

Reputation: 47

Using JS return in another script

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>

Upvotes: 1

Views: 120

Answers (3)

ethor11
ethor11

Reputation: 47

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.

Upvotes: 0

Yak O&#39;Poe
Yak O&#39;Poe

Reputation: 822

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/

Upvotes: 0

David Llaca Martin
David Llaca Martin

Reputation: 11

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

Upvotes: 1

Related Questions