如何从javascript console.log获取变量并显示在html特定信息中？

Question

我的任务是从 API 结果（console.log）中获取并在 html 中显示特定数据。 现在，我只有一个 javascript 可以通过货币转换获取汇率。 从获取的数据中，我只需要货币汇率。

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));

这是我在 console.log 中得到的结果，我的问题是我无法显示： 1. 从该日志到 HTML的任何内容和 2.来自该日志的特定数据（速率）。

这是我得到的控制台日志：

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

我需要获得一个费率/“报价”作为变量，以便在其他地方使用它。

先感谢您。

Answer 1

使用response.json()然后将所需的属性提取到变量中。

 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));

Answer 2

1. 要使用 HTML 显示值，您需要在 javascript 中使用模板文字概念。 您可以在 HTML 中设置具有唯一 ID 的元素。 使用 HTML DOM 元素的 innerHTML 属性和模板文字可以实现。

2. 该日志中的特定数据（速率）：

让速率=结果.结果；

正如我上面提到的，您将获得费率结果。

Answer 3

假设你有类似的东西

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

在你的 html 中，

我会做这样的事情：

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

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

Answer 4

我有答案了！

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")

当然这是另一个 API 提供商，但无论如何，这是获取和操作汇率数据的最简单方法。

感谢大家的尝试：）