I am using the Vue framework in combination to create a frontend showing a map --> vue2-leaflet
Inside a GET request using axios i want to set the data for a Leaflet polyline using the response.data from the request. Therefore, I am trying to assign the response.data inside the request to the map object. But inside the request the map object is undefined (in the function before the request it was always defined):
axios.get<ModelRoad>('url,
{headers: {Accept: 'application/json'}}).then(response => {
this.mapConfig.roads = response.data;
})
}
I am getting the following exception in the browser:
browserexception
Related
I'm creating a Vue app and using Google Maps API to render a map but when I try loading it, I receive the error 'TypeError: Cannot read properties of undefined (reading 'maps')'
I don't know where this error is coming from as I've imported the google map Loader function using:
I'm assuming it's coming from the google object maps property here:
onMounted(async () => {
await loader.load()
new google.maps.Map(mapDiv.value, {
center: currPos.value,
zoom: 14
})
})
I've taken a screenshot of the error
Error from console
I've imported the Loader from google maps in the component itself, and also in the view that renders the component.
import { Loader } from '#googlemaps/js-api-loader'
However, on page load it still throws the error that maps is not found.
'TypeError: Cannot read properties of undefined (reading 'maps')'
The Loader comes from an npm package here:
https://www.npmjs.com/package/#googlemaps/js-api-loader
google variable is not defined in your script, which should be a response, so assign the response from load method to google variable :
onMounted(async () => {
let google = await loader.load()
new google.maps.Map(mapDiv.value, {
center: currPos.value,
zoom: 14
})
})
I'm working on a nuxtjs project, using asyncData and fetch methods but I need to use parameterize url for get requests and the parameters are present in the data property of vue. How will I use it.
....
data(){
return {
param1: "455",
param2: "xyz",
products: []
}
},
asyncData(){
return axio.get(`/api/products?type=${param1}&cat{param2}`).then(response => {
this products = response.data
})
}
The approach I used here for parameterize url is correct? Please also discuss for fetch methods as well
You can't. asyncData hook runs before creating the component, so it doesn't have access to the component instance (because it doesn't exists yet).
asyncData could have access to global properties throught the Nuxt context, such as:
route parameters
vuex store
injected properties with plugins
You could use the fetch hook instead, which does have access to this (the component instance).
The difference is that it won't block the page render on client navigation, so you have to handle the loading state with $fetchState.pending.
fetch () {
return axio.get(`/api/products?type=${this.param1}&cat{this.param2}`).then(response => {
this products = response.data
}
In my application I have a Vuex 4 store and a Vue 3 Composition Api setup() method.
In the stores action I use axios to make an api call to get a list of bill payments.
The getAllBills action does not live directly in my Store.js file, it exists as a module.
getAllBills({ commit }) {
BillApiCalls.getBills().then(res => {
commit('GET_ALL_BILLS', res.data)
}).catch(error => console.log(error))
},
Then in my Bill.vue file I have the setup() method and am trying to access the data to be used throughout the same Bill.vue file.
setup () {
//Vuex store
const store = useStore();
const billPayments = store.dispatch('payment/getAllBills').then(res => console.log(res));
}
If I check the console from the above .then() res returns as undefined. If I remove the .then() from the billPayments declaration and just do:
console.log(billPayments)
In the console I get
Promise {<pending>}.
Current Store:
import { bill } from './modules/bill.module';
const store = createStore({
modules: {
bill
}
});
The endpoint is working, if I use Postman all of my data is returned as expected but I am having trouble figuring out how to access that data using a dispatched action with the composition api.
The Vuex 4 docs don't mention how to actually resolve the promise to access the data to be used throughout the same component.
An action isn't generally supposed to return data it acts on, data is a part of the state and should be accessed there; this is what another answer shows:
await store.dispatch('payment/getAllBills')
console.log(store.state.payment.bills);
The action doesn't chain promises so it cannot be correctly used. It should be:
return BillApiCalls.getBills()...
Or prefer async..await together with promise to avoid some common mistakes that can be made with raw promises.
I trying to get the data from server and trying to render in UI but while making service call I am getting the below error.
Calling service API:
const json = request('http://localhost:8080/part/findall').then(response => response.json());
Error:
Task.js:243 Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1
at parse (<anonymous>)
at Task.js:243
at handler (ExtensiblePromise.js:137)
I am getting the data from server but while assign to json getting that above error. Can you please help me where I am doing mistake.
My response Json:
[{"id":485,"orderno":"00605164","type":"typeA","description":"description"},{"id":486,"orderno":"00605164","type":"typeB","description":"description"}]
This sounds like a serverside issue and not dojo related.
I reproduced your example with a sample json :
const json = request('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json());
and the data is fine.
Here is the complete example
import request from '#dojo/core/request';
import xhr from '#dojo/core/request/providers/xhr';
request.setDefaultProvider(xhr);
const json = request('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data));
Although the xhr is optional (it is the default, I guess) - this is fine in a browser and if you replace xhr by node it works fine in Node.js too.
How is your Server transferring the JSON - maybe as html ?
Also: What exactly is your dojo version?
More information for request than on https://dojo.io can be found in
https://github.com/dojo/core/tree/master/src/request
You got an array as response, try to use
response[0].json()
I am trying to do a post request in a vue js app using axios to a local API and the response is returning empty data. The post request on API is working fine using Postman tool. Below is my code
var the_data = {
title: 'This is title',
description: 'this is description'
}
axios.post('/api/snippets/insert', the_data)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
On the API end, I am using a simple PHP script and printing whole $_POST request data using this code
var_dump($_POST);
But this is returning empty array.
I was running into this as well. Axios does not send the POST data in the form you're expecting. You need something like http://github.com/ljharb/qs and then use axios.post('/api/snippets/insert', Qs.stringify(the_data)). Please note this build on cdnjs uses Qs, not qs.
Alternatives to qs would be e.g. JSON.stringify() or jQuery's $.param().