个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我知道这个问题会以不同的方式被问到，但我正在努力思考如何处理从 API URI 返回的数据，并希望更清楚地了解如何正确使用它。
我正在练习 API，并决定制作一个简单的天气应用程序，从 openweathermap.com 获取数据
示例 URI 为 http://api.openweathermap.org/data/2.5/weather?q=Los+Angeles&APPID=myApiKey
我使用页面上的输入来连接这些数据，该输入填充您输入的任何城市或邮政编码，并将完整路径打印为链接，效果很好。但是当我尝试解析此 URI 中的数据时，出现错误
Uncaught SyntaxError: Unexpected token h in JSON at position 0
at JSON.parse (<anonymous>)
at getWeather (index.js:25)
at HTMLButtonElement.onclick
我正在尝试分解此 API 数据中的数据，以便我可以适本地显示温度、风、湿度等内容。
这是我编写的代码，用于测试我是否正确获取数据。
// Set API variables
const api = "http://api.openweathermap.org/data/2.5/weather?q=";
const apiKey ="myAPIKey";
// Set City and Units
let unitType = "imperial";
let units = "&units=" + unitType;
function setup() {
var button = document.getElementById('submit');
button.click = getWeather();
}
function getWeather() {
let city = document.getElementById('city').value;
let fullPath = api + city + "&APPID=" + apiKey + units;
console.log(city);
//document.getElementById('weatherData').innerHTML='<a href="' + fullPath + '">' + city + '</a>';
let data = fullPath;
let obj = JSON.parse(data);
document.getElementById('weatherData').innerHTML = obj.main.temp;
}
当您单击页面上的提交按钮时，将调用 getWeather() 函数，如下所示:
<!doctype html>
<html>
<head></head>
<body>
<input type="text" id="city" placeholder="Enter a city" />
<button onclick="getWeather()" id="submit">Submit</button>
<div id="weatherData" style="background: #ccc; padding: 20px; margin-top: 25px;">
</div>
<script src="index.js"></script>
</body>
</html>
我做错了什么？我以前从未使用过 API，所以如果我看起来很无知，请原谅我。当我让程序在屏幕上打印一个串联的 URL(链接到 URI 本身)时，它就可以工作，但现在我尝试实际提取数据时，我收到了上面的错误。
编辑这里是返回的 API 数据的示例:
{
"coord": {
"lon": -96.81,
"lat": 32.78
},
"weather": [
{
"id": 804,
"main": "Clouds",
"description": "overcast clouds",
"icon": "04d"
}
],
"base": "stations",
"main": {
"temp": 295.15,
"pressure": 1016,
"humidity": 78,
"temp_min": 294.15,
"temp_max": 296.15
},
"visibility": 20921,
"wind": {
"speed": 4.1,
"deg": 180
},
"clouds": {
"all": 100
},
"dt": 1491835980,
"sys": {
"type": 1,
"id": 2596,
"message": 0.0099,
"country": "US",
"sunrise": 1491825755,
"sunset": 1491872065
},
"id": 4684888,
"name": "Dallas",
"cod": 200
}
最佳答案
let fullPath = api + city + "&APPID=" + apiKey + units; // fullPath is a string representing an URL
let data = fullPath; // data is a string representing an URL
let obj = JSON.parse(data); // You try to parse an URL, not JSON
您尝试解析 URL，但它不起作用。在此 URL 上发出 XHR 请求以获取您的 JSON 数据。
编辑:
要请求远程 JSON 文件，请使用 fetch API(如果您的浏览器未实现 fetch，请包含 polyfill):
fetch('/data.json')
.then(function(response) {
return response.json();
}).then(function(json) {
console.log('parsed json', json);
}).catch(function(ex) {
console.log('parsing failed', ex);
})
关于javascript - 如何使用纯 JavaScript 解析来自 API 的 JSON？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43326503/
24
4
0
可以抛出异常的函数可以有[pure]属性吗？ 最佳答案 根据 https://msdn.microsoft.com/en-us/library/system.diagnostics.contracts
我使用的是纯 css 推送导航。它工作得很好，但是我不知道如何在单击导航链接时隐藏菜单。您必须手动单击菜单图标才能使菜单返回隐藏状态。但是，当单击链接并且站点跳转到某个部分时，我希望菜单自动滑入隐藏状
我正在尝试让纯 CSS 下拉菜单正常工作。它在很大程度上确实有效，除了其他内容似乎显示出来但我不知道为什么。 http://jsfiddle.net/uQveP/4/ 有人可以告诉我我做错了什么吗？
这个问题在这里已经有了答案: What is a "callback" in C and how are they implemented? (9 个回答) 关闭 8 年前。 我正在以这种方式实现回
我想在不使用 Javascript 或任何其他语言的情况下，使用 HTML 和 CSS 创建一个 Page Back Button。我想用纯 HTML 和 CSS 来完成。 我进行了搜索，但每次代码中
我对序言很陌生。据我所知，Pure Prolog 仅限于 Horn 子句。 这是一个非常简单的序言程序 - % student( Snr , FirstName , LastName ,
我想在加载数据时对容器使用以下加载指示器。 问题是， slider 具有固定的宽度和高度(300 像素和 300 像素)，但我希望它能够动态适应容器。当我尝试添加宽度时:140px；和高度:140px
当内容超过可用宽度时，我需要启用滚动阴影。这是我试图用纯 css(没有 JS)来实现的。我遇到了很多文章，可以使用 css 多背景和背景附件来实现。如果内容是文本类型，则可以使用下面的 jsfilld
我正在编写一个上古卷轴在线插件，它由一个名为 Havok Script 的轻微修改的 Lua 5.1 引擎支持。 .这个Lua环境不允许访问os , io , package , debug模块或任何
我自己尝试过将 Arduino 库编译成他们自己的独立库并链接到 Eclipse 中的一个项目，但在此过程中遇到了一些问题。 是否有关于如何启动和运行的体面指南？我一直很难在网上找到一个真正有效的..
我在这里遇到了一些麻烦。我正在尝试使用本地存储创建一个待办事项列表，但我唯一要做的就是将列表项添加到本地存储并删除 所有项目 从本地存储中删除，但我无法从列表中删除单个 SELECTED 项目。有人可
我的问题很简单。考虑以下 CodePen .是否有可能仅使用 css 就可以获得相同的结果？换句话说，如果不使用 javascrip 如何做到这一点？非常感谢! Nachos are
我正在使用没有 jquery 的 angularjs，并尝试创建滚动事件监听器。 尝试过这种方法: $rootScope.$watch(function() { return $windo
我正在尝试使用纯 webgl 创建虚线。我知道这已经有一个问题，也许我很笨，但我不知道如何让它发挥作用。我理解这个概念，但我不知道如何在着色器中获取沿路径的距离。以前的答案有以下行: varying
我正在尝试用纯 JavaScript 制作工具提示，显示在 hover .就像 Stack Overflow 中将鼠标悬停在配置文件名称上的一个 div显示。 我尝试使用 onmouseover ,
我想要通过 AJAX 将监听器添加到新元素的想法: 例如，现在我有 hello world 我为每个 添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。
如果我错误地提出了这个问题，或者之前已经有人问过并回答过这个问题，我提前表示歉意。我的搜索发现了类似的基于 JQuery 和/或静态日期的问答，我正在寻找具有动态日期的纯 JavaScript 解决方
在 Real World Haskell, Chapter 28, Software transactional memory ，开发了一个并发的网络链接检查器。它获取网页中的所有链接，并使用 HEA
我正在尝试取消 jQuery-fy 一个聪明的 piece of code ，但有点太聪明了。 目标是simple 。将图像从桌面拖动到浏览器。 在这次 unjQueryfication 过程中，我发
如何重新创建 jQuery end() $('#id') .find('.class') .css('font',f) .end() .find('.seven') .css(b,'red') 我有什
我是一名优秀的程序员,十分优秀！