Remote Data as a Source

[zane-shus]

I am trying to get my data from a remote data API, it is in this format:

[{
    "id": 1,
    "name": "def",
    "position": {
        "lat": 42.123,
        "lng": -75.324
    }
},
{
    "id": 2,
    "name": "abc",
    "position": {
        "lat": 43.234,
        "lng": -76.234
    }
}]

My code looks like this:

class cleanUp extends WebApiAdaptor {
    processResponse() {
    let original = super.processResponse.apply(this, arguments);
    console.log(original);
    return original;
    }
}

export default defineComponent({
    name: 'App',
    data() {
    return {
        center: { lat: 51.093048, lng: 6.84212 },
        markers: new DataManager({
            url: 'http://192.168.0.101/api/v1/positions',
            adaptor: new cleanUp(),
            crossDomain: true,
            offline: true
        }),

    };

    },
    }); 

I am getting this error: Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'position')

Any thoughts please?

Note: I am using SyncFusion and Vue3.

[zane-shus]

I have used AXIOS for this and its happy:

created(){

    axios.get('http://192.168.0.101/api/v1/positions')
    .then((response) => {
      console.log(response.data.Items)
      this.markers = response.data.Items
    })
    .catch(function(err) {
      console.error(err)
    })

    },