How can I processing the json (http-Request) with Vue / Html script

Question

How can I processing the json (https://engelhardt.ocloud.de/index.php/apps/phonetrack/api/getlastpositions/64dda53cc503629cedb5f8c8102708ed) to display the attributes (lat,lon, speed, ...) with vue / html ?

Json-content:

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

Here is my index.html file to show the raw json content:

<!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>

The browser result is empty:

Json-Raw: []

What is going wrong? How can I access to the single topics, like json.lat, json.lon or json.speed?

score 1 · Answer 1 · answered Dec 26 '18 at 14:41

1

In your fetchData() method, do the following:

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

More reading can be found here.

answered Dec 26 '18 at 14:41

Ru Chern Chong

3,692
13
33
43

it does not works. the result is empty: [] – Thomas Dec 26 '18 at 15:30
@Thomas you are having CORS error, and thus the response is returning an empty array. – Ru Chern Chong Dec 26 '18 at 15:42
yes, i get a CORS warning. But if I start the html script in the browser the browser network analysis show status 200 and the json content is in the networks anaylsis visiable. – Thomas Dec 26 '18 at 15:45

Maxim · Answer 2 · 2018-12-26T14:49:17.117

0

Try to change to

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

Also make sure that CORS policy is ok.

edited Dec 26 '18 at 14:49

answered Dec 26 '18 at 14:32

Maxim

2,233
6
16

it does not works. the result is empty: [] – Thomas Dec 26 '18 at 14:42
I change the answer. problem could be in the `this` – Maxim Dec 26 '18 at 14:49
oh i get a warning: Cross-origin request blocked. The same-source-rule does not allow reading of external source https://site/login (Reason: CORS-Header 'Access-Control-Allow-Origin' is missing). But if I start the html script in the browser the network analysis show status 200 and the json content is availlable. – Thomas Dec 26 '18 at 15:38
So you should use your backend to retrieve this data by their API. And your frontend side will call API of your backend – Maxim Dec 26 '18 at 16:06

How can I processing the json (http-Request) with Vue / Html script

2 Answers2