How to retrieve specific json data from http request using jquery

Question

I am trying to target the exchange rate from the JSON http response as listed below using jquery. Please assume jquery has been included in the withing <head></head> tags

{
    "Realtime Currency Exchange Rate": {
        "1. From_Currency Code": "XRP",
        "2. From_Currency Name": "Ripples",
        "3. To_Currency Code": "GBP",
        "4. To_Currency Name": "British Pound Sterling",
        "5. Exchange Rate": "1.07367766",
        "6. Last Refreshed": "2017-12-28 19:42:42",
        "7. Time Zone": "UTC"
    }
}

HTML

<select id="asset">
    <option value="">Please Select...</option>
    <option value="BTC">Bitcon ($BTC)</option>
    <option value="BCH">Bitcon Cash ($BTH)</option>
    <option value="ETH">Ethereum ($ETH)</option>
    <option value="LTC">Litecoin ($LTC)</option>
    <option value="XRP">Ripple ($XRP)</option>

</select>

<div id="output" class="hide">


</div>

JS

var output = $("#output");
output.removeClass("hide");
output.hide();
$("#asset").on('change', function() {
  var coin = $("#asset").val();

 $.ajax({
  type: "GET",
      url: "https://www.alphavantage.co/query?function=CURRENCY_EXCHANGE_RATE&from_currency=" + coin + "&to_currency=GBP&apikey=API_KEY_HERE",
      success: function(data) {
         output.html(JSON.stringify(data));

         // Would like to get the Exchange Rate only for use later on.
      }
  });

  output.slideDown(); 

});

JasonB · Accepted Answer · 2017-12-28 22:07:36Z

1

Try:

data["Realtime Currency Exchange Rate"]["5. Exchange Rate"]

let jsonData = {
  "Realtime Currency Exchange Rate": {
    "1. From_Currency Code": "XRP",
    "2. From_Currency Name": "Ripples",
    "3. To_Currency Code": "GBP",
    "4. To_Currency Name": "British Pound Sterling",
    "5. Exchange Rate": "1.07367766",
    "6. Last Refreshed": "2017-12-28 19:42:42",
    "7. Time Zone": "UTC"
  }
};

console.log( jsonData["Realtime Currency Exchange Rate"]["5. Exchange Rate"] );

answered Dec 28, 2017 at 22:07

JasonB

6,4182 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Seam Lewis Over a year ago

Works perfectly. Thank you so much for taking the time to answer my question.

Seam Lewis · Accepted Answer · 2017-12-29 10:13:38Z

0

use the data object to select the bits you need, I've just added it to an alert in the example below:

var output = $("#output");
output.removeClass("hide");
output.hide();
$("#asset").on('change', function() {
    var coin = $("#asset").val();

    $.ajax({
        type: "GET",
        url: "https://www.alphavantage.co/queryfunction=CURRENCY_EXCHANGE_RATE&from_currency=" + coin + "&to_currency=GBP&apikey=API_KEY_HERE",
        success: function(data) {

          var response = JSON.parse(data);

          alert(response['Realtime Currency Exchange Rate']['5. Exchange Rate']);

        }
    });

    output.slideDown(); 

});

edited Dec 29, 2017 at 10:13

Seam Lewis

253 bronze badges

answered Dec 28, 2017 at 22:18

thatguy

991 silver badge11 bronze badges

1 Comment

Seam Lewis Over a year ago

Hi, after copying the above code the alert response seems to fail. Review answer from JasonB below/above. Thank you so much for taking the time to answer my question.

Collectives™ on Stack Overflow

How to retrieve specific json data from http request using jquery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related