如何使用Vue / Html脚本处理json (http-Request)
如何使用Vue / Html脚本处理json (http-Request)
提问于 2018-12-26 22:24:03
如何处理json (https://engelhardt.ocloud.de/index.php/apps/phonetrack/api/getlastpositions/64dda53cc503629cedb5f8c8102708ed)以显示属性(经度、经度、速度...)使用vue / html？
Json-content：
{
"64dda53cc503629cedb5f8c8102708ed": {
"Test": {
"lat": 50,
"lon": 10,
"timestamp": 15,
"batterylevel": 10,
"satellites": 5,
"accuracy": 10,
"altitude": 100,
"speed": 0,
"bearing": 0
}
}
}下面是我用来显示原始json内容的index.html文件：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>
</head>
<body>
<div id="vue-root">
Json-Raw: {{ jsonraw }}
</div>
</body>
<script>
new Vue({
el: "#vue-root",
data: {
jsonraw: [],
lat: [],
lon: []
},
created () {
this.fetchData()
},
methods: {
fetchData () {
fetch('https://engelhardt.ocloud.de/index.php/apps/phonetrack/api/getlastpositions/64dda53cc503629cedb5f8c8102708ed')
.then(response => {
this.jsonraw = response.data;
})
}
}
})
</script>
</html> 浏览器结果为空：
Json-Raw：[]
哪里出了问题？如何访问单个主题，如json.lat、json.lon或json.speed？
回答 2
Stack Overflow用户
发布于 2018-12-26 22:41:07
在fetchData()方法中，执行以下操作：
fetchData () {
fetch('https://engelhardt.ocloud.de/index.php/apps/phonetrack/api/getlastpositions/64dda53cc503629cedb5f8c8102708ed')
.then(response => response.json()) // This is the important line you should have when using fetch
.then(data => this.jsonRaw = data)
}更多的阅读可以在here找到。
Stack Overflow用户
发布于 2018-12-26 22:32:48
尝试更改为
fetchData () {
const vm = this;
fetch('https://engelhardt.ocloud.de/index.php/apps/phonetrack/api/getlastpo .sitions/64dda53cc503629cedb5f8c8102708ed')
.then(response => {
vm.jsonraw = response.json();
})
}还要确保CORS策略是正确的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53933334
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号