I would like to ask for some help with my javascript code.
When my trigger is an tag and plain text inside it, it works. But for structural reasons I had to use a tag inside my , and that way I'm getting an error, "Uncaught (in promise) TypeError: src is undefined".
Here's the part of the JS code that the error is referring to:
// destructure values
const { link, src, artist, title, moodcover } = e.target.dataset;
const peaksSrc = src.replace('.mp3', '.json');
const res = await fetch(peaksSrc);
const { data: peaks } = await res.json();
wavesurfer.load(src, peaks);
document.body.scrollTop = 0;
What would be the solution for this problem?
Thanks in advance!
I've tried using or instead of , but that didn't help.
Related
I am using VueJS2 and having the following issue when returning API data from a function:
Uncaught (in promise) TypeError: Cannot read property 'P_shortName' of undefined
While the UI does render the data successfully after a while, I get annoying console log output above.
In template I have:
<td>
{{ registerName(country.registerIdentifier_FK) }}
</td>
And the registerName() looks like so:
methods: {
async registerName(id) {
const register = this.registers.find(
register => id === register.registerIdentifier_PK
)
return register.P_shortName
},
}
What can I do to mitigate this error?
Try it.
And I didn't see the need to use async here.
registerName(id) {
const register = this.registers.find(
(register) => id === register.registerIdentifier_PK
);
return register ? register.P_shortName : null;
}
Is there a way to use custom names for loading, error and data props? When I try it, I just get undefined:
const { queryLoading, queryError, queryData } = useQuery(someQuery);
This is not a big deal,just could not find anything in documentation and thought maybe there is some trick
you can do something like this:
const { data: queryData, error: queryError, loading: queryLoading } = useQuery(someQuery);
Im trying to get consentUrl but getting "Cannot read property 'authorizationUrl' of undefined".
Im using "xero-node": "^4.1.2"
const xero = new xero_node.XeroClient({
clientId: "clientId",
clientSecret: "clientSecret",
redirectUris: ["redirectUrl"],
scopes: "offline_access,openid".split(",")
});
then inside async function i'm calling this:
let consentUrl = await xero.buildConsentUrl();
and it gives error : Cannot read property 'authorizationUrl' of undefined.
Should I create url manually if this function is not supported. Need help thanks.
try to execute await xero.buildClient();
before let consentUrl = await xero.buildConsentUrl();
I am starting to lose my mind in debugging an application that I inherited from a fellow developer who is absent.
I have narrowed down the problem to the following place in code (php files are checked, Vue instances are initialised, there are no syntax errors).
This is my the component that gets initialised:
var RadniStol = Vue.component('radnistol', {
template: '#template-RadniStol',
data() {
return {
tableData: [],
requestData: {
sort: "ID",
order: "DESC"
}
}
},
methods: {
reloadTable: function (event) {
data = this.requestData;
this.$http.post('php/get/radni_stol.php', data).then(response => {
console.log(response.data.bodyText);
this.tableData = response.data.records;
});
},
.
.
.
The PHP file that gets called with the POST method is working correctly, querying the database and echoing the response in a JSON format.
The thing that is making me pull out my hair is the following: the console.log(response.data) outputs the following into the console:
{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}
It is an JSON object that I expected to have but when trying to assign it to the data of the component with:
this.tableData = response.data;
or any other way… response.data.records returns ‘undefined’ in the console. I have tryed with JSON.parse() but no success.
When logging types to console:
response variable is a response object with a status 200 and body and bodyText containing the data from the database.
response.data is a string type containing the string JSON with the data from the database.
When trying to use JSON.parse(response.data) or JSON.parse() on anything in the callback of the POST method I get the following error in the console:
RadniStol.js?version=0.1.1:17 Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 0
at JSON.parse (<anonymous>)
at VueComponent.$http.post.then.response (RadniStol.js?version=0.1.1:17)
at <anonymous>
I am really starting to lose my mind over this issue, please help!
Thank you
If response.data is string, with JSON inside, then to access the records field, you should decode it like this:
JSON.parse(response.data).records
Not sure this has something to do with PHP or Vue.js, it is just plain javascript issue.
If it not decodes, than problem is definitely in response.data. For example
{"records":[{"DODAN_NA_RADNI_STOL":"1","..."}]}
is not a valid JSON, because key "..." needs to have some value.
But it seems to me that response.data is already parsed.
What I suggest you to do, is to write handler of the response as separate function, make response object that mimics actual response object by hand, and then test it separately from request. So you could show us request object and function that works with it.
I had the same error and fixed it.
Result will be response.body not response.data.
Here is my code:
getS: function(page) {
this.$http.get('vue-manager?page=' + page).then((response) => {
var data = JSON.parse(response.body);
this.student = data.data.data;
this.pagination = data.pagination;
});
},
i want to check the returned value of $http.get() but i get undefined value. Here is my vue js code:
var vm = new Vue({
el: '#permissionMgt',
data: {
permissionID: []
},
methods:{
fetchPermissionDetail: function (id) {
this.$http.get('../api/getComplaintPermission/' + id, function (data) {
this.permissionID = data.permissionID; //permissionID is a data field of the database
alert(this.permissionID); //*****this alert is giving me undefined value
});
},
}
});
Can you tell me thats the problem here?.. btw $http.get() is properly fetching all the data.
You need to check what type is the data returned from the server. If #Raj's solution didn't resolve your issue then probably permissionID is not present in the data that is returned.
Do a colsole.log(data) and check whether data is an object or an array of objects.
Cheers!
Its a common js error. Make the following changes and it will work.
fetchPermissionDetail: function (id) {
var self = this; //add this line
this.$http.get('../api/getComplaintPermission/' + id, function (data) {
self.permissionID = data.permissionID; //replace "this" with "self"
});
},
}
the reason is this points to window inside the anonymous function function()
This is a well known js problem. If you are using es2015 you can use arrow syntax (() => { /*code*/ }) syntax which sets this correctly