如何从第三方API提取数据并使用javascript将其显示在我的页面上？
[英]How do I extract data from a 3rd party api and display it on my page with javascript?
问题描述
I need to be able to fetch invoice data from this api: https://apidoc.qoyod.com/ 
我需要能够从此api获取发票数据： https : //apidoc.qoyod.com/
and display it on my page through javascript. 并通过javascript将其显示在我的页面上。 First, the user enters an api key and then the page displays the invoice index and details. 首先，用户输入api密钥，然后页面显示发票索引和详细信息。
This is the code I have so far: 这是我到目前为止的代码：
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>
The challenge here is the "fetch" part. 这里的挑战是“获取”部分。 I am sure there is something I am missing out on while extracting the data. 我确信在提取数据时会缺少某些东西。 Maybe I'm not using the API URL correctly? 也许我没有正确使用API URL？ I just can't seem to be able to "grab" the API data into my"data" object. 我似乎无法将API数据“抓取”到我的“数据”对象中。 When I click the button, I get no output at all! 当我单击按钮时，根本没有输出！
Also, I need to figure out how to use the entered api key to fetch the data. 另外，我需要弄清楚如何使用输入的api密钥来获取数据。 I honestly have no clue at all. 老实说，我一点都不知道。 It's my first time to work with apis and I feel sooo lost :(( 这是我第一次使用api，我感到很失落：（（
If there are any API pros out there, I would greatly appreciate your assistance! 如果有任何API专家，非常感谢您的协助！
Thanks 谢谢
UPDATE: I managed to add the api as a header while fetching the data in this format: 更新：我设法以这种格式获取数据时将api添加为标头：
fetch(URL, { headers: new Headers({ 'API-KEY' : '[api-key-here]' }) })
However, I got this error in my browser: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.qoyod.com/api/2.0/invoices/1 . (Reason: CORS request did not succeed)." 但是，我在浏览器中收到此错误：“跨域请求被阻止：同一起源策略不允许在https://www.qoyod.com/api/2.0/invoices/1上读取远程资源。（原因：CORS请求没有成功）。”
Does this mean I need to be granted access by the owner of the api server? 这是否意味着我需要获得api服务器所有者的访问权限？
2 个解决方案
解决方案1
0 2018-10-12 05:03:10
Try to run below code snippet. 尝试在下面的代码段中运行。 and make sure you have data in correct JSON Object format. 并确保您使用正确的JSON Object格式的数据。 Below i try to replicate the problem. 下面我尝试复制问题。 assume you have data in data variable after Ajax call. 假设您在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>
解决方案2
-1 2018-10-13 05:16:58
If you are use postman than its very easy to you. 如果您使用邮递员，则比它非常容易。 You need api key pass to header and they already provide what data pass in body. 您需要将api键传递给标头，并且它们已经提供了正文中传递的数据。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.