How to Get a JSON URL With JQuery and Output Text

Question

I am trying to create a very simple script using JQuery that will take a JSON dataset from a URL, filter the JSON using a hard-coded parameter and output the text from some of the data from the resulting filtered dataset. I would prefer to use JQuery, but am open to JavaScript options as well. This particular example is using the NYC CitiBike station status JSON feed and filtering using the "station_id" variable of 168 (the first station in the set).

I would also like this to refresh the query (or the div) every 30 seconds without refreshing the entire HTML page.

Below is an example of what I am attempting to accomplish. It should convey the general sense of what I am trying to accomplish.

<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>

<body>
    <div class="output"></div>

    <script>
    $.getJSON('https://gbfs.citibikenyc.com/gbfs/en/station_status.json', function(data) {
    var objects = data.stations.filter(function(v){return v.station_id==168});        

        var text = `Station ID: ${objects.station_id}<br>
            Bikes Available: ${objects.num_bikes_available}<br>
            Docks Available: ${objects.num_docks_available}'


        $(".output").html(text);
    });
    </script>

</body>
</html>

`filter()` returns an array but you are treating result as a single object. Is that where your problem is? You really haven't outlined specific problem or any errors — charlietfl, Aug 12 '19 at 19:23
Your `text` variable is badly formatted. Apart from that, this code seems to be lifted from somewhere and doesn't emphasize any specific problem areas. — Udo E., Aug 12 '19 at 19:40
@charlietfl yes I am having difficulty returning a single object within the array within the JSON. So for example returning the value of 'num_bikes_available' within a single array (defined by 'station_id') within the dataset of the JSON data — Jon, Aug 12 '19 at 19:43
@UdoE. not "lifted" from anywhere. Just my own attempt to create what I am looking for. My problem is really just trying to filter the JSON to return the one array for a single 'station_id'. — Jon, Aug 12 '19 at 19:45
So if it is only going to be one result you can use `objects[0]` for that object. Can also change `filter()` to `find()` to return a single object instead of array — charlietfl, Aug 12 '19 at 19:45
Or you can just attach `[0]` to the end of the filter line, before the semi-colon. You major problem here should the **refresh after 30seconds**. Am I right? — Udo E., Aug 12 '19 at 19:51
An array of even a single object is still an array and needs to be treated like one. Can't read object, read content at index 0 of object. Like this object[0]. — Nawed Khan, Aug 12 '19 at 19:54
If your question is "how can I do this every 30 seconds", the answer to [Calling a function every 60 seconds](https://stackoverflow.com/q/3138756/215552) will answer that (just replace the 6 with a 3, obviously), but it's not clear what your question is. You can [edit] your question to make it clearer... — Heretic Monkey, Aug 12 '19 at 20:07

score 0 · Accepted Answer · answered Aug 12 '19 at 19:55

If all you want is the single item you can use find() instead of filter().

Also the array is in property data.data.stations

$.getJSON('https://gbfs.citibikenyc.com/gbfs/en/station_status.json', function(data) {
  var item = data.data.stations.find(function(v) {
    return v.station_id == 168
  });

  var text = `Station ID: ${item .station_id}<br>
            Bikes Available: ${item.num_bikes_available}<br>
            Docks Available: ${item.num_docks_available}`


  $(".output").html(text);

});

As for repeating this you can wrap it in a function and use setInterval() to call that function at whatever interval you need.

Working Demo

Thank you! Works perfectly. The 'data.data.stations.find()' function was what was throwing me off. Thank you for sharing this very elegant solution! — Jon, Aug 12 '19 at 20:16

How to Get a JSON URL With JQuery and Output Text

1 Answers1