完全坚持如何在 HTML 中显示我的 JSON。编辑：我知道我想如何格式化它，除了原始 JSON [重复]，我无法让它输出任何东西
Posted
技术标签:
【中文标题】完全坚持如何在 HTML 中显示我的 JSON。编辑：我知道我想如何格式化它，除了原始 JSON [重复]，我无法让它输出任何东西【英文标题】：Completely stuck on how to display my JSON in HTML. Edit: I know how i want to format it, I just can't get it to output anything but raw JSON [duplicate] 【发布时间】：2020-07-11 14:53:51 【问题描述】：我已经为此工作了几个小时，到处搜索，似乎无法解决它。我已经留下了 API URL，所以如果你想看看（它是公开的）。我累了，所以如果我不明白，请告诉我。我正在尝试为新闻制作自定义布局。但是我不能用它做任何事情，我只有原始的 JSON，而且我已经尝试了很多。如果你能举个例子，比如带有新闻文章名称的标题，或者简单的东西，我会想办法的，但现在，我很沮丧，在圈子里跑，哈哈。谢谢！
"location":
"long": -106.346771,
"countryOrRegion": "Canada",
"provinceOrState": null,
"county": null,
"isoCode": "CA",
"lat": 56.130366
,
"updatedDateTime": "2020-03-31T04:46:00.3795966Z",
"news": [
"path": "_news/2020-03-31-canada-post-workers-customers-seeing-heightened-safeguards.md",
"title": "Canada Post workers, customers seeing heightened safeguards",
"excerpt": "COVID-19 ...",
"heat": null,
"tags": [
"CA"
] ,
"type": "article",
"webUrl": "https://nnsl.com/yellowknifer/canada-post-workers-customers-seeing-heightened-safeguards/",
"ampWebUrl": null,
"cdnAmpWebUrl": null,
"publishedDateTime": "2020-03-30T21:00:00-07:00",
"updatedDateTime": null,
"provider":
"name": "Northern News Services",
"domain": "nnsl.com",
"images": null,
"publishers": null,
"authors": null
,
"images": null,
"locale": "en-us",
"categories": [
"news"
],
"topics": [
"Coronavirus in Canada",
"Coronavirus"
]
,
"path": "_news/2020-03-31-in-canada-and-abroad-covid-19-super-spreaders-could-be-anywhere.md",
"title": "In Canada and abroad, COVID-19 super-spreaders could be anywhere",
"excerpt": "In Canada, while no specific individual has yet been identified as super-spreader ...
Scientists are researching how much of a role silent carriers of COVID-19 - those who exhibit no symptoms - play in unknowingly spreading the disease. This is why self-isolation is important, Riskin said. \"It’s a reminder that for Canadians, we all have ...",
"heat": null,
" ...etc
糟糕，您需要一个密钥才能查看该文件。我将粘贴一个条目。它是免费的。
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="./jquery-3.4.1.min.js"></script>
<style>
countryOrRegion: font-size: 20px;
</style>
<title></title>
</head>
<body>
<div id="demo"></div>
<script>
$.ajax(
type: "GET",
url: "https://api.smartable.ai/coronavirus/news/CA",
// Request headers
beforeSend: function(xhrObj)
xhrObj.setRequestHeader("Cache-Control", "no-cache");
xhrObj.setRequestHeader("Subscription-Key", "my free key");
,
)
.done(function (data)
var myJSON = JSON.stringify(data);
document.getElementById("demo").innerHTML = myJSON;
)
</script>
</body>
【问题讨论】：
由您决定新闻的布局方式。通过卡片或表格，由您决定。如果您愿意，可以使用 html 免费模板 我无法以 HTML 格式显示任何新闻。我知道我想怎么做，但我无法解析/解码。无论我做什么，我都会得到相同的原始原始表单。 我知道您对此感到疲倦并且可能对此感到沮丧，但如果您可以展示您的尝试，那么我们可以帮助您让它发挥作用。尝试搜索“在 HTML 表格中显示 JSON” 之类的内容，这样的帖子很多。这是一个很好的例子~Parsing JSON objects for HTML tableJSON.stringify() 将您的数据转换为 JSON。而JSON.parse() 将其转换为您可以使用的对象。将dataType: 'json' 属性添加到您的$.ajax 选项以接收预解析的数据。然后你可以以任何你想要的方式使用这个对象。
我已经尝试了很多 Show in HTML table, jQuery.each(data.results, function(i, val) code (blank page), php $JSON = file_get_contents( "corona.lmao.ninja/all"); $jsonIterator = new RecursiveIteratorIterator(new RecursiveArrayIterator(json_decode($JSON, TRUE)), RecursiveIteratorIterator::SELF_FIRST); (空白页),
【参考方案1】：
如何按原样使用响应？ 我更改了您的代码以使用来自 reqres.in 的免费 API 调用，然后使用结果中的特定信息。
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
countryOrRegion: font-size: 20px;
</style>
<title></title>
</head>
<body>
<div id="demo">
<p id="first-name"></p>
<p id="last-name"></p>
</div>
<script>
$.ajax(
type: "GET",
url: "https://reqres.in/api/users/1",
// Request headers
beforeSend: function(xhrObj)
xhrObj.setRequestHeader("Cache-Control", "no-cache");
xhrObj.setRequestHeader("Subscription-Key", "my free key");
,
)
.done(function (data)
console.log('Your response', data)
document.getElementById("first-name").innerHTML = data.data.first_name;
document.getElementById("last-name").innerHTML = data.data.last_name;
)
</script>
</body>
因此您可以使用data.location.long、data.location.lat 或任何您需要在 API 调用响应中显示的内容。
【讨论】：
谢谢你，用一些摆弄，效果很好。非常感谢，干杯！ 欢迎您。终于可以写cmets了，赢了；）【参考方案2】：我要做的是创建一个这样的模板构建器函数：
function BuildNewsTemplate(obj)
let str = "<div class='card'>";//outer
str += `<h2>$obj.title</h2>`;
str += `<p>$obj.publishedDateTime</p>`;
str += `<a href='$obj.webUrl'>Read More...</p>`;
str += "</div>";
$('#demo').append(str);
then in your ajax response you can do this:
.done(function (data)
for(let i=0;i<data.news.length;i++)
BuildNewsTemplate(data.news[i]);
)
【讨论】：
以上是关于完全坚持如何在 HTML 中显示我的 JSON。编辑：我知道我想如何格式化它，除了原始 JSON [重复]，我无法让它输出任何东西的主要内容，如果未能解决你的问题，请参考以下文章
AngularJS：如何在页面完全加载之前显示预加载或加载？
如何使用 jquery 在 html 中显示我的 json 结果？
CloudFormation 坚持认为我的 DynamoDB 创建 JSON 无效.. 但我看不出如何