Javascript 我不知道如何将json响应放入html元素中
我写了这段代码，当我调用api时会有响应，但我不明白为什么它没有显示在html页面中 此时我真的不知道该怎么办，因为页面加载了，但文本没有显示在页面中Javascript 我不知道如何将json响应放入html元素中,javascript,html,node.js,Javascript,Html,Node.js,我写了这段代码，当我调用api时会有响应，但我不明白为什么它没有显示在html页面中 此时我真的不知道该怎么办，因为页面加载了，但文本没有显示在页面中 <!DOCTYPE html> <html> <head> <title>IN THE NEWS</title> <link rel="stylesheet" href="api.css"> <meta charset="
<!DOCTYPE html>
<html>
<head>
<title>IN THE NEWS</title>
<link rel="stylesheet" href="api.css">
<meta charset="utf-8" lang="eng">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="sports section">
<h1>SPORTS</h1>
<P class="sport"></P>
</div>
</body>
</html>
const NewsAPI = require('newsapi');
const newsapi = new NewsAPI('API_KEY');
let sports = document.querySelector(".sport").innerHTML;
newsapi.v2.topHeadlines({
category: 'sports',
language: 'en',
country: 'us'
}).then(res =>{
let val = res.articles[0];
sports = val;
})
.catch(rej=>{
console.log(rej);
})
您正在重新分配变量，而不是将数据追加到DOM中 替换
sports = val;
如果api有CORS版本，那么您可以这样做 const res={status:ok，totalResults:10，articles:[{source:{id:bbc news，name:bbc news}，作者：BBC新闻，标题：冠状病毒：骆驼提供免疫治疗的关键，描述：骆驼特殊进化的小抗体是冠状病毒治疗突破的基础，网址：http://www.bbc.co.uk/news/science-environment-53369103，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/EE07/production/_113353906_llamas.jpg，发表日期：2020-07-13T11:20:20Z，内容：图片版权归雷丁大学图片说明\r\n美洲驼和羊驼已经进化出抗体，科学家在实验室里“重新设计”\r\n当美洲驼在雷丁的牧场上吃草时，他…[+2831 chars]}，{来源：{id:bbc新闻，名称：bbc新闻}，作者：BBC新闻，标题：中国对鲁比奥和克鲁兹实施制裁，描述：这一举动是在美国因中国政府在新疆的行为而对中国官员实施制裁之后作出的，网址：http://www.bbc.co.uk/news/world-asia-china-53387331，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/41C3/production/_113353861_rubio-cruz.jpg，发表日期：2020-07-13T10:59:52Z，内容：图片版权所有路透社/GettyImageCaption\r\n马可·卢比奥和特德·克鲁兹是美国共和党的重要人物\r\n在美国实施制裁后，中国宣布对共和党高层实施制裁…[+3122 chars]}，{来源：{id:bbc新闻，姓名：bbc新闻}，作者：BBC Sport，标题：曼彻斯特城在向Cas上诉时推翻了对欧洲赛事的两年禁令，描述：曼彻斯特城成功地推翻了对欧洲俱乐部赛事的两年禁令，网址：http://www.bbc.co.uk/sport/football/53387306，urlToImage:https://ichef.bbci.co.uk/onesport/cps/624/cpsprodpb/13590/production/_97584297_breaking_news.png，publishedAt:2020-07-13T08:45:57Z，内容：曼城成功地推翻了他们两年来禁止参加欧洲俱乐部比赛的禁令。\r\n体育仲裁法庭宣布俱乐部被清除了伪装股票基金的罪名……[+702 chars]}，{来源：{id:bbc news，name:bbc news}，作者：BBC新闻，标题：纳尔逊·曼德拉的女儿津兹去世，描述：南非第一位黑人总统的最小女儿去世，享年59岁，网址：http://www.bbc.co.uk/news/world-africa-53387667，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/12CD7/production/_113351077_gettyimages-465640143-002.jpg，发表日期：2020-07-13T07:27:35Z，内容：图片版权归Getty Images\r\nZindzi Mandela，南非反种族隔离偶像纳尔逊·曼德拉和温妮·马迪基泽拉·曼德拉的女儿，已去世，公共广播公司南非广播公司报道。\r\n他死了…[+518个字符]}，{来源：{id:bbc新闻，姓名：bbc新闻}，作者：BBC新闻，标题：女演员凯莉·普雷斯顿，约翰·特拉沃尔塔的妻子，去世，描述：这位美国女演员在与乳腺癌进行了两年的斗争后去世，特拉沃尔塔说，网址：http://www.bbc.co.uk/news/entertainment-arts-53387236，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/11431/production/_113350707_mediaitem113350706.jpg，发表电话：2020-07-13T06:25:14Z，内容：图片版权图片图片图片说明\r\n特拉沃尔塔和普雷斯顿结婚20多年\r\n约翰·特拉沃尔塔的妻子兼演员凯利·普雷斯顿去世，享年57岁。\r\n特拉沃尔塔在Instagram上发布了Pr.。[+1073 chars]}，{来源：{id:bbc新闻，姓名：bbc新闻}，作者：BBC新闻，标题：冠状病毒更新：世界卫生组织说的每日病毒病例全球记录，描述：周日确认了23万多例病例，大部分在美洲和东南亚，网址：http://www.bbc.co.uk/news/live/world-53386093，urlToImage:https://m.files.bbci.co.uk/modules/bbc-morph-news-waf-page-meta/4.1.3/bbc_news_logo.png，发布 edAt:2020-07-13T04:22:22.9453632Z，内容：77岁的阿弥陀佛·巴切曾主演过数百部电影图片说明：77岁的阿弥陀佛·巴切曾主演过数百部电影\r\n印度巨星并不比巴切一家大，一家被认为……[+1062个字符]，{来源：{id:bbc新闻，姓名：bbc新闻}，作者：BBC新闻，标题：17年后美国联邦执行将继续进行，描述：被判有罪的杀人犯Daniel Lewis Lee的死刑周五被联邦法官阻止，url:http://www.bbc.co.uk/news/world-us-canada-53385642，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/170BA/production/_113349349_mediaitem113349348.jpg，publishedAt:2020-07-13T00:44:48Z，内容：图片版权图片图片说明\r\n李在将一家三口的尸体倾倒在湖中之前杀死了他们\r\n美国17年多来的第一次联邦处决将在印第安纳州进行。[+2178 chars]}，{来源：{id:bbc新闻，姓名：bbc新闻}，作者：BBC新闻，标题：在家工作倦怠，描述：一位私人教练，一位广告公司员工和一位音乐家分享他们的倦怠经历，网址：http://www.bbc.co.uk/news/uk-53352234，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/E467/production/_113317485_p08kbdvh.jpg，发布日期：2020-07-12T23:02:58Z，c内容：null}，{来源：{id:bbc新闻，名称：bbc新闻}，作者：BBC新闻，标题：杜达在波兰选举中以微弱优势领先-出口民调，描述：保守党总统安德烈·杜达以微弱优势领先华沙市长，出口民调显示，url:http://www.bbc.co.uk/news/world-europe-53385021，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/148B2/production/_111764148_breaking-promo.png，PublishedDat:2020-07-12T19:16:56Z，内容：出口民调显示，波兰保守党总统安德烈·杜达在与华沙市长的决选中以微弱优势领先。\r\n这则突发新闻正在更新，更多细节将发布于sh.。[+203 chars]}，{来源：{id:bbc news，姓名：bbc news}，作者：英国广播公司新闻，标题：佛罗里达州打破每日冠状病毒感染的记录，描述：24小时15299例新病例的统计数据掩盖了4月份纽约最糟糕的每日发病率，网址：http://www.bbc.co.uk/news/world-us-canada-53382540，urlToImage:https://ichef.bbci.co.uk/news/1024/branded_news/5DA6/production/_113347932_mediaitem113347931.jpg，PublishedDat:2020-07-12T19:05:16Z，内容：图片版权图片说明\r\n佛罗里达州许多医院的重症监护病房正在满负荷运转\r\n佛罗里达州在24小时内登记了15299例新冠病毒病例的州记录-大约一周； document.querySelector.sport.innerHTML=res.articles.map 艺术=>`${art.title}
${art.description}
` 参加 体育请单击编辑，然后单击[]代码段编辑器并提供一个示例数据。如果API有效，只需从返回的数据中发布一个简短的示例。JSON中没有文章键response@kenny完整的json响应太长，无法发布，显示的响应是文章数组中的第一项。您确实会将API_密钥更改为您请求并支付的API密钥，对吗？是的，是的，我会，如果我没有，我就不会得到回应。但通常我的代码应该正常工作？好像不是因为语法什么的？我只是试了一下，它不起作用，还有其他想法吗？你说的“它不起作用”是什么意思？你有什么错误，如果有的话？尝试登录到控制台逻辑的不同部分，从sports元素开始，检查脚本启动时是否已加载。我刚刚尝试了此操作，但仍然不起作用。只需将console.logdocument.querySelector.sport放在这一行之前，并检查控制台中得到的输出。在这里分享。此外，只需检查是否存在任何其他错误chrome控制台中显示的唯一错误是ReferenceError:require未定义。除了控制台，logging sport返回undefined。我的问题是它根本没有显示在页面上，我想在尝试循环之前至少显示数组的第一项。然后还有其他事情发生。控制台错误等。例如CORS error require不是JavaScript，您需要在React或NODEY中运行。如果没有服务器代理，您无法从浏览器访问新闻api。谢谢您的帮助，我仍然很困惑，因为我不明白您当时是如何进行api调用的。如果它不接受javascript，为什么我会得到响应。真令人沮丧
sports = val;
document.querySelector(".sport").innerHTML = val;