仅使用js在HTML页面中显示API请求结果

Question

I'm kinda new to js and API,我对 js 和 API 有点陌生，

I have written a little code that is suppose to go ask 2 websites some data, then I only take a part of the result and add it to my html page.我写了一个小代码，假设去向 2 个网站询问一些数据，然后我只取一部分结果并将其添加到我的 html 页面。

I'm trying to get it work with the first website as it will be easy to make it work on the second one when I'll have the first.我试图让它在第一个网站上工作，因为当我拥有第一个网站时，很容易让它在第二个网站上工作。

I want to use only js and not php or other languages.我只想使用 js 而不是 php 或其他语言。

It is not working for the moment...它暂时不起作用......

So here is my js所以这是我的 js

Ok if you come here only now,好吧，如果你现在才来，

My code has been updated using the 2 answers below of Justin and Aashah, the issue now is that the browser says that in order to fetch with cors, I need a http or https, and says that there is an issue with [object%20Object], so still no data showing up, if someone has a solution, please help us :)我的代码已使用 Justin 和 Aashah 的以下 2 个答案进行了更新，现在的问题是浏览器说为了使用 cors 获取，我需要一个 http 或 https，并说 [object%20Object 存在问题]，所以仍然没有数据显示，如果有人有解决方案，请帮助我们:)

var urlbitfinex = "https://api.bitfinex.com/v1";
var urlkraken = "https://api.kraken.com/0/public/Ticker?pair=";
var resultBitfinex;

//request bitfinex price
request.get(urlbitfinex + "/pubticker/btcusd",
  resultBitfinex = function(error, response, body) {
    console.log(body)
    return body;
  });

//request kraken price
request.get(urlkraken + "xbteur",
  function(error, response, body) {
    console.log(body);
  });

//Pushing the result to the html
var price_USD = document.getElementById('price-usd');
var USDPrice = '<p>USDEUR Price:' + resultBitfinex.ask '</p>';
price_USD.innerHTML += USDPrice;

And my html还有我的 html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="price-usd">
  </div>
  <script src="getPrices.js"></script>
</body>
</html>

Answer 1

You have to handle UI changes in the callback:您必须在回调中处理 UI 更改：

fetch({ url: urlkraken + "/pubticker/btcusd", cors: true })
.then(res => res.json())
.then(res => {
  const price_USD = document.querySelector('#price-usd');
  const USDPrice = '<p>USDEUR Price:' + res.ask + '</p>';
  price_USD.innerHTML += USDPrice;
})
.catch(err => console.log(err));

Answer 2

You aren't really doing anything with the response.你并没有真正对响应做任何事情。

If you don't have to support IE you can use fetch .如果您不必支持 IE，则可以使用fetch 。 Here's an example taken from: How to get the response of XMLHttpRequest?这是一个取自的示例：如何获取 XMLHttpRequest 的响应？

var url = "https://stackoverflow.com"; // Change this to your URL
fetch(url)
    .then(function(response) {
          if(response.ok) { // Check if response went through
              response.json().then(function(data) { 
                  var price_USD = document.getElementById('price-usd');
                  var USDPrice = '<p>USDEUR Price:' + data.something + '</p>';
                  price_USD.innerHTML += USDPrice;
              });
          } else { // Response wasn't ok. Check dev tools
              console.log("response failed?");
          }
    });

More about Fetch here .更多关于Fetch 在这里。

仅使用js在HTML页面中显示API请求结果

问题描述

2 个解决方案

解决方案1
1 2017-10-16 13:09:31

解决方案2
1 已采纳 2017-10-16 13:11:07

仅使用js在HTML页面中显示API请求结果

问题描述

2 个解决方案

解决方案1 1 2017-10-16 13:09:31

解决方案2 1 已采纳 2017-10-16 13:11:07

解决方案1
1 2017-10-16 13:09:31

解决方案2
1 已采纳 2017-10-16 13:11:07