Extract data from JSON file without downloading

Question

I want to run a script that takes in a JSON file, performs a function on it to extract and format selected data into one variable ($history) to then render in the HTML. The format of the JSON file is:

{123: {"epochBlocks": 0, "blocks": 0, ..."}, "updatedAt": "2323432" <- (key I want to skip), ...}

My code for the script:

let $history = "";
$.getJSON(
  "https://pooltool.s3-us-west-2.amazonaws.com/8e4d2a3/pools/bd1d1aafead6f652f76f5921b4ffdb429d7eb9d5322d0f4700f4f70f997c5a82/epochstats.json"
).done(function (data) {
  $.each(data.items, function (i, item) {
   // if (!data.items[i].includes(/[\w]/gi)) {     //if key does not contain letters, do below:

      $history = $history + data[item].epochBlocks + "/" + data[item].blocks + "\n";
   // }
  });
});
$("#history").text($history);

At the end of the script I use $("#history").text($history) to render it in HTML with <span id="history"></span>.

I am getting no output using the above code. The URL for the JSON file is downloadable, so I am not sure if the script can read it? I also thought something might be wrong with my if statement so I commented it out and there is still no output. Please point me to the issue - my code or the JSON url being auto-download? Thanks.

`$("#history").text($history);` should be in the `done` callback, otherwise you set `$("#history")` to en empty string. See: [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) — 3limin4t0r, Apr 18 '20 at 11:59
@Andreas why should there be an error? The problem is more likely due to `getJSON` being async, and `$("#history").text($history);` not being in the `done` callback. — t.niese, Apr 18 '20 at 11:59
@t.niese You're right. I got a CORS error but it was caused by an extension and not AWS... — Andreas, Apr 18 '20 at 12:05
I have tried putting the $("#history").text($history); into the done callback but I am still getting no output. — Dostrelith, Apr 18 '20 at 12:06

t.niese · Accepted Answer · 2020-04-18T12:05:34.770

The $.getJSON request is as asynchronous so $("#history").text($history); is executed before the request is done, so $history will still be "".

You need to move $("#history").text($history); into the done callback:

let $history = "";
$.getJSON(
  "https://pooltool.s3-us-west-2.amazonaws.com/8e4d2a3/pools/bd1d1aafead6f652f76f5921b4ffdb429d7eb9d5322d0f4700f4f70f997c5a82/epochstats.json"
).done(function (data) {
  $.each(data.items, function (i, item) {
   // if (!data.items[i].includes(/[\w]/gi)) {     //if key does not contain letters, do below:

      $history = $history + data[item].epochBlocks + "/" + data[item].blocks + "\n";
   // }
  });

  $("#history").text($history);
});

In addition to that: $.each(data.items, function(i, item) { would not because the returned data is in the format:

{
  "122": {
    "epoch": 122,
    "epochSlots": null,
    "blocks": 0,
    "blockstake": 0,
    "stake": "1180516948",
    "value_for_stakers": 0,
    "value_taxed": 0
  },
  "123": {
    "epoch": 123,
    "epochSlots": null,
    "blocks": 0,
    "blockstake": 1180516948,
    "stake": "32307048146",
    "value_for_stakers": 0,
    "value_taxed": 0
  },
  "124": {
    "epoch": 124,
    "epochSlots": 0,
    "blocks": 0,
    "blockstake": 32307048146,
    "stake": "32311428152",
    "value_for_stakers": 0,
    "value_taxed": 0
  },
  "125": {
    "epoch": 125,
    "epochSlots": 0,
    "blocks": 0,
    "blockstake": 32311428152,
    "stake": "249343099181",
    "value_for_stakers": 0,
    "value_taxed": 0
  },
  "updatedAt": 1587151808
}

So there is no property items. So you need to write $.each(data, function (i, item) {

Then this would just be another dupe of [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) — Andreas, Apr 18 '20 at 12:01
Thanks, I'll look into it now. So the JSON auto-download doesn't affect the code, i.e. the script can still read it without adding anything else? — Dostrelith, Apr 18 '20 at 12:08
@Andreas sure that why I linked it as dup, wrote the answer as community wiki, and then added the additional note about the each (that could be considered as typo) which would be the next problem. — t.niese, Apr 18 '20 at 12:09
@DamjanOstrelic the auto-download will not have an effect if you request the file using ajax (in you case `getJSON`). — t.niese, Apr 18 '20 at 12:11
Got the output coming out now, just need to work out the formatting! Thanks! — Dostrelith, Apr 18 '20 at 12:11

Extract data from JSON file without downloading

1 Answers1