时间戳

首页 > 解决方案 > 完全坚持如何在 HTML 中显示我的 JSON。编辑：我知道我想如何格式化它，除了原始 JSON，我无法让它输出任何东西

javascript - 完全坚持如何在 HTML 中显示我的 JSON。编辑：我知道我想如何格式化它，除了原始 JSON，我无法让它输出任何东西

问题描述

我已经为此工作了几个小时，到处搜索，似乎无法解决它。我已经留下了 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>

标签： javascriptphpjqueryjsonapi

解决方案

原样使用响应怎么样？我更改了您的代码以使用来自 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 调用响应中显示的任何内容。

推荐阅读