如何使用Vue/Html脚本处理json（http请求）_Html_Vue.js

如何使用Vue/Html脚本处理json（http请求）

html vue.js

如何使用Vue/Html脚本处理json（http请求）,html,vue.js,Html,Vue.js,如何处理json（）以使用vue/html显示属性（lat、lon、speed等等） Json内容： { "64dda53cc503629cedb5f8c8102708ed": { "Test": { "lat": 50, "lon": 10, "timestamp": 15, "batterylevel": 10, "satellites": 5, "accuracy": 10, "altitude

如何处理json（）以使用vue/html显示属性（lat、lon、speed等等）

Json内容：

{
  "64dda53cc503629cedb5f8c8102708ed": {
    "Test": {
      "lat": 50,
      "lon": 10,
      "timestamp": 15,
      "batterylevel": 10,
      "satellites": 5,
      "accuracy": 10,
      "altitude": 100,
      "speed": 0,
      "bearing": 0
    }
  }
}

下面是我的index.html文件，用于显示原始json内容：

<!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:{{jsonraw}}
新Vue({
el:“vue根”，
数据：{
jsonraw:[]，
lat:[]，
龙：[]
},  
创建（）{
this.fetchData（）
},  
方法：{
获取数据（）{
取（'https://engelhardt.ocloud.de/index.php/apps/phonetrack/api/getlastpositions/64dda53cc503629cedb5f8c8102708ed')
。然后（响应=>{
this.jsonraw=response.data；
})        
}
}
})

浏览器结果为空：

Json原始：[]

出什么事了？如何访问单个主题，如json.lat、json.lon或json.speed？

尝试更改为

  fetchData () {
        const vm = this;
  fetch('https://engelhardt.ocloud.de/index.php/apps/phonetrack/api/getlastpo .sitions/64dda53cc503629cedb5f8c8102708ed')
              .then(response => {
              vm.jsonraw = response.json();
            })        
        }

还要确保CORS策略正常。

在

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)
}

可以找到更多的阅读资料。

它不起作用。结果为空：[]我更改了答案。问题可能出在

这个哦，我收到一个警告：跨源请求被阻止。同一源规则不允许读取外部源（原因：缺少CORS标头“Access Control allow Origin”）。但是如果我在浏览器中启动html脚本，网络分析显示状态为200，json内容可用。因此，您应该使用后端通过API检索这些数据。你的前端会调用后端的API，但它不起作用。结果为空：[]@Thomas您有CORS错误，因此响应返回一个空数组。是的，我收到一个CORS警告。但是如果我在浏览器中启动html脚本，浏览器网络分析将显示状态200，并且json内容在网络分析中可见。