How to get as variable and display in html particular info from javascript console.log?

Question

I have a task to get and display in html a particular data from API result (console.log). For now on, I only have a javascript that gets exchange rates with currency conversion. From fetched data I only need currency rate.

var myHeaders = new Headers();
myHeaders.append("apikey", "r4T22n3O14QL7FoG6FzY7FuUHTNXiKAy");

var requestOptions = {
  method: 'GET',
  redirect: 'follow',
  headers: myHeaders
};

//var rslt = console.log(result);

fetch("https://api.apilayer.com/currency_data/convert?to=RUB&from=EUR&amount=1", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

Here is the result I get in console.log and my problem is that I cannot display : 1. anything from that log to HTML and 2. particular data (rates) from that log.

this is the console log I am getting:

{
    "success": true,
    "query": {
        "from": "EUR",
        "to": "RUB",
        "amount": 1
    },
    "info": {
        "timestamp": 1658378463,
        "quote": 56.217115
    },
    "result": 56.217115
}

I need to get a rates/"quote" as a variable in order to use it elsewhere.

Thank you in advance.

Can you show us how did you try to display this variables in HTML ? — Goran.it
– Goran.it, Commented Jul 21, 2022 at 5:03
So use .json() instead of .text() and access the property in the object. — epascarello
– epascarello, Commented Jul 21, 2022 at 16:14
okay , I am out of limits for requests can I get data from here ? api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=48e4e2e268e63ccf935d26ff10a921b8 let's say to get weather description I need just a working example so I can figure out — Narius
– Narius, Commented Jul 21, 2022 at 16:31

Barmar · Accepted Answer · 2022-07-21 16:12:47Z

1

Use response.json() and then extract the properties that you want into variables.

fetch("https://api.apilayer.com/currency_data/convert?to=RUB&from=EUR&amount=1", requestOptions)
  .then(response => response.json())
  .then(json => {
    let quote = json.info.quote;
    document.getElementById("quote").innerText = quote;
   })
  .catch(error => console.log('error', error));

Replace "quote" with the actual ID of the element where you want to show the quote.

edited Jul 21, 2022 at 16:12

answered Jul 21, 2022 at 5:05

Barmar

789k57 gold badges554 silver badges669 bronze badges

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

3 Comments

Narius Over a year ago

thanks for response, but it doesn't work

Barmar Over a year ago

Are you getting any errors in the console?

Narius Over a year ago

I think I have a problem with request limits I reached extra question, can I get particular data from here ? api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=48e4e2e268e63ccf935d26ff10a921b8 let's say to get weather description

Prasanna Kumar · Accepted Answer · 2022-07-21 05:03:15Z

0

To display value using HTML, you need to use Template literals concept in javascript. You can set elements with a unique ID in HTML. Using HTML DOM Element innerHTML Property and Template Literals you can achieve.
Particular data (rates) from that log:

let rate = result.result;

As I mentioned above you will get the rate result.

answered Jul 21, 2022 at 5:03

Prasanna Kumar

551 silver badge7 bronze badges

1 Comment

Narius Over a year ago

honestly that could be more understandable if I have a working example

chimeraha · Accepted Answer · 2022-07-21 05:06:02Z

0

Assuming you have something like

<div id="quote"></div>

in your html,

I would do something like this:

  .then(response => response.json())
  .then(data => { document.getElementById('quote').innerHTML = data.info.quote})
  .catch(error => console.log('error', error));

see https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

answered Jul 21, 2022 at 5:06

chimeraha

4515 silver badges7 bronze badges

1 Comment

Narius Over a year ago

thanks for your response , but this doesn't work

Narius · Accepted Answer · 2022-07-22 03:07:37Z

0

I've got the answer !

const render = data => {
      
      const rate = document.querySelector(".rate")
        rate.innerHTML = (data.info.rate).toFixed(2);
        

    }

    const init = url => {
      fetch(url).then(resp => resp.json()).then(render)
    }

    init("https://api.exchangerate.host/convert?from=EUR&to=RUB")

and of course this is another API provider, but anyway, this is the simplest way to get and manipulate with currency rate data.

Thanks for everyone's attempt :)

answered Jul 22, 2022 at 3:07

Narius

398 bronze badges

Collectives™ on Stack Overflow

How to get as variable and display in html particular info from javascript console.log?

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related