英文:
How to integrate JSON data from API into html code?
问题
(noob问题),但我在使用从FAA NOTAM API接收的JSON数据并将其通过id或class转换为HTML代码时遇到了一些困难。
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
var response = e.target.responseText;
console.log(response);
});
xhr.addEventListener('error', function(e) {
console.error('请求错误,状态为', e.target.status);
});
xhr.open('GET', 'https://external-api.faa.gov/notamapi/v1/notams?icaoLocation=ELLX');
xhr.setRequestHeader('client_id','');
xhr.setRequestHeader('client_secret','');
xhr.send();
<a id="input"></a>
英文:
(noob question), but I have some difficulties using the JSON data, I receive from the FAA NOTAM API and converting that via an id or class into html code.
(I have hidden the keys on purpose)
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var xhr = new XMLHttpRequest();
xhr.addEventListener('load', function(e) {
var response = e.target.responseText;
console.log(response);
});
xhr.addEventListener('error', function(e) {
console.error('Request error with status', e.target.status);
});
xhr.open('GET', 'https://external-api.faa.gov/notamapi/v1/notams?icaoLocation=ELLX');
xhr.setRequestHeader('client_id','');
xhr.setRequestHeader('client_secret','');
xhr.send();
<!-- language: lang-html -->
<a id="input"></a>
<!-- end snippet -->
答案1
得分: 1
我不建议在JavaScript中使用旧式的异步处理方式(XMLHTTPRequest),但在任何处理JavaScript中的异步方式时,当你从API获取响应时,你应该将JSON响应解析为DOM。你可以在how-to-call-for-json-output-from-an-api-into-html中找到关于如何执行这个操作的步骤。(链接的帖子使用fetch API来处理JavaScript中的异步操作)
而且,如果你是新手在处理JavaScript异步操作方面,how-do-i-return-the-response-from-an-asynchronous-call这个帖子有很好的解释关于处理JavaScript异步操作。
英文:
I don't recommend the old school way of asynchronous handling in js (XMLHTTPRequest) but in any way of handling asynchronous in js when you take response from api you should parse that json reponse to DOM. you can find your answer about steps of doing this in how-to-call-for-json-output-from-an-api-into-html.(linked post is using fetch api for handling asynchronous in js)
and also if you are new to asynchronous js, how-do-i-return-the-response-from-an-asynchronous-call this post have a good explanations of handling asynchronous js.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论