Question

我需要能够从以下api获取发票数据：https://apidoc.qoyod.com/

并通过javascript将其显示在我的页面上。首先，用户输入api密钥，然后页面显示发票索引和详细信息。

这是我到目前为止的代码：

function displayData()
{

 const div = document.getElementById("result");


 const URL = 'https://www.qoyod.com/api/2.0/invoices/1';

	  
	  fetch(URL)
	  
	  .then((resp) => resp.json())
	 
	  .then(function(data)
	  {
		  let invoices = data.results;
		  invoices.map(function(invoice){
			  let p = document.createElement('p');
			  p.innerHTML=`${invoice.index}`;
			  
			  div.appendChild(p);			  
		  })	  
	  })
	
  
  
  .catch(function(error) {
    console.log(json.stringify(error));
  })
  }

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Qoyod Assignment</title>

  <link href="styles.css" rel="stylesheet">

<script type="text/javascript" src="scripts.js"></script>

<script type="text/javascript">

</script>

</head>

<body>

  <div id="root">
  
<input style="float: left; margin-right: 10px;" type="text" placeholder="Enter API Key" />
<button onClick="displayData();" >Display Data</button>
<div id="result"></div>

</body>


</html>

这里的挑战是“获取”部分。我确信在提取数据时会缺少某些东西。也许我没有正确使用API URL？我似乎无法将API数据“抓取”到我的“数据”对象中。当我单击按钮时，根本没有输出！

此外，我需要弄清楚如何使用输入的api密钥来获取数据。老实说，我一点都不知道。这是我第一次使用api，我感到非常迷失：（（

如果有任何API专家，非常感谢您的协助！

谢谢

更新：我在以这种格式获取数据时设法将api添加为标头：

fetch(URL, {
  headers: new Headers({
    'API-KEY' : '[api-key-here]' })
})

但是，我在浏览器中遇到了以下错误：“跨域请求被阻止：相同起源策略不允许读取https://www.qoyod.com/api/2.0/invoices/1处的远程资源。（原因：CORS请求未成功）。”

这是否意味着我需要获得api服务器所有者的访问权限？

Answer 1

尝试在以下代码段下运行。并确保您使用正确的JSON Object格式的数据。下面我尝试复制问题。假设您在Ajax调用之后在data变量中有数据。

function displayData() {
  const div = document.getElementById("result");

  /* const URL = 'https://www.qoyod.com/api/2.0/invoices/1';

  	  fetch(URL)
  	  
  	  .then((resp) => resp.json())
  	 
  	  .then(function(data)
  	  { */

  let data = {
    results: [{
        "index": 1,
        "code": "170"
      },
      {
        "index": 2,
        "code": "175"
      }
    ]
  };

  let invoices = data.results;
  invoices.map(function(invoice) {
    let p = document.createElement('p');
    p.innerHTML = `${invoice.index}`;

    div.appendChild(p);
  })
  // })
  /*
  .catch(function(error) {
    console.log(json.stringify(error));
  })*/
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Qoyod Assignment</title>

  <link href="styles.css" rel="stylesheet">

  <script type="text/javascript" src="scripts.js"></script>

</head>

<body>

  <div id="root">

    <input style="float: left; margin-right: 10px;" type="text" placeholder="Enter API Key" />
    <button onClick="displayData();">Display Data</button>
    <div id="result"></div>

</body>

</html>

Answer 2

如果您使用邮差比它对您来说非常容易。您需要将api键传递给标头，并且它们已经提供了正文中传递的数据。

如何从第三方API提取数据并使用javascript将其显示在我的页面上？

2 个答案: