Getting values from 2 APIs and comparing them

Question

I am trying to make a simple program to get the latest version from the GitHub API and compare it to a local JSON file. I have jQuery to make getting the information easier. If the version from the API is different from the local file, this script should print out that it is out of date in the console. But I keep on getting errors with the program not being able to read the variables, I tried making Cversion and Lversion to global variables putting it under window so you could call it with window.Cversion, but it still returned with undefined. I tried declaring the variables before like var Lversion;, but same thing, undefined. Any tips?

This is the code for the main index.html file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <p>Latest release: <span id="tag_name">Loading...</span></p>
    <p>Current release (the site): <span id="version">Loading...</span></p>
    <p>Is this site up to date? <span id="uptodate">Loading...</span></p>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
      $.getJSON("https://api.github.com/repos/3kh0/3kh0.github.io/releases/latest", function (data) {
        window.Lversion = data.tag_name;
        document.getElementById("tag_name").innerText = Lversion;
      });
      $.getJSON("about.json", function (cur) {
        window.Cversion = cur.version;
        document.getElementById("version").innerText = Cversion;
      });
      if (window.Lversion === window.Cversion) {
        console.log("Up to date! " + window.Cversion);
        document.getElementById("uptodate").innerText = "Yes";
      } else {
        console.warn("Out of date, latest version: " + window.Lversion);
        document.getElementById("uptodate").innerText = "No";
      }
    </script>
  </body>
</html>

about.json

{
  "version": "v3-22.11.28"
}

You need a Promise here that resolves when both the ajax calls complete, then runs the code in the second block — Mark Schultheiss, Nov 30 '22 at 23:09

score 0 · Answer 1 · answered Nov 30 '22 at 23:31

Use a regular promise or a jquery example.

Caveat: this is TOTALLY untested code

let urlLast = "https://api.github.com/repos/3kh0/3kh0.github.io/releases/latest";
let urlAbout = "about.json"

const getJson = async(url) => {
  const res = await fetch(url);
  if (!res.ok) throw new Error(`${res.status}: ${await res.text()}`)
  return res.json();
}

Promise.all([getJson(urlLast), getJson(urlAbout)]).then(results => {
  // results is an array
  if (results[0] === results[1]) {
    console.log("Up to date! " + results[1]);
    document.getElementById("uptodate").innerText = "Yes";
  } else {
    console.warn("Out of date, latest version: " + results[0]);
    document.getElementById("uptodate").innerText = "No";
  }
});

// jquery of similar
let lastone = $.getJSON(urlLast);
let aboutme = $.getJSON(urlAbout);

$.when(lastone, aboutme).done((...results) => {
  // results is an array
  if (results[0] === results[1]) {
    console.log("Up to date! " + results[1]);
    document.getElementById("uptodate").innerText = "Yes";
  } else {
    console.warn("Out of date, latest version: " + results[0]);
    document.getElementById("uptodate").innerText = "No";
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Latest release: <span id="tag_name">Loading...</span></p>
<p>Current release (the site): <span id="version">Loading...</span></p>
<p>Is this site up to date? <span id="uptodate">Loading...</span></p>

I keep on getting this error, any ways to fix this? I am quite new to this. Out of date, latest version: [object Object] Out of date, latest version: [object Object],success,[object Object] — Echo, Nov 30 '22 at 23:40
Bottom line you cannot predict which of the `getJSON` will finish first since they are asynchronous calls and the only way to do the verification is after they both complete - which is what the Promise does as well as the deferred jQuery option which uses the `.when()` — Mark Schultheiss, Dec 01 '22 at 14:16

Getting values from 2 APIs and comparing them

1 Answers1