I'm working on a react native project where I need to make a progress bar for uploading a file.
here is my code, kindly check it out.
axios.post(urlRequest, requestData, {
headers: headerConfig,
onUploadProgress: function (progressEvent) {
console.log('progressEvent : ', progressEvent);
console.dir('progressEvent loaded : ', progressEvent.loaded);
console.dir('progressEvent total : ', progressEvent.total);
},
in the response of this function, I'm getting following console output.
As you can see here, I'm getting loaded & total object inside Symbol(original_event) but, I can't access them.
Any Idea? how can I use them?
i think console.dir accepts and returns only object not string 'progressEvent '.
And Path to object you are pointing is wrong progressEvent.Symbol.loaded.
Related
First of all I'm using Vue.js to access data of an API using axios and a proxy
I'm trying to access the property of an object nested in the last array of several other arrays but I'm kinda hitting a wall, here's the detail :
Global details
the property I'm trying to access
I've tried different ways but here's my latest try :
axios
.get(proxyurl + history_url, {
reqHeaders
})
.then((reponse) => {
console.log(reponse.data)
this.lastItem = reponse.data.data.history[history.length-1]
console.log(this.lastItem)
this.lastEvol = this.lastItem.price
console.log(this.lastEvol)
})
The issue here is that the answer to "console.log(this.lastItem)" is :
lastItem answer
The value of the properties are now different and incorrect.
Since it's showing "Proxy" as the root object name I thought that may be the issue but I'm not sure.
I've tried several other ways to access this property but only had errors.
Any help would be greatly appreciated.
history is undefined in the history.length expression. Try this:
.then((reponse) => {
const history = reponse.data.data.history;
console.log(reponse.data)
this.lastItem = history[history.length-1]
console.log(this.lastItem)
this.lastEvol = this.lastItem.price
console.log(this.lastEvol)
})
weatherData;
getDataFromApi(formData) {
this.apiService.getWeather(formData.location).subscribe(data => this.weatherData = data)
console.log(this.weatherData)
}
This is the function to get data and then store it in a local variable weatherData, a JSON file is returned from the API.
To get data in the veiw(HTML) I'm using
<p class="item1">{{ this.weatherData?.request.query }}</p>.
It works fine here but when I need to use the WeatherData for another function then it is showing that the parameters passed is undefined.
The reason is that your code will work asynchronously and the console.log() will be executed before the API call is completed.
The reason that the data is displayed in view is that you subscribed to the data and it will be streamed to the view asynchronously. The view will be updated only after the API call is complete because of subscription. So you can see the data in the view and not in the console.
Try this code and it will work fine.
ngOnInit() {
// getting data for Delhi location
this.apiService.getWeather("Delhi").subscribe(data => {
this.weatherData = data;
console.log(this.weatherData);
});
}
The reason behind undefined was code works asynchronously. While you send the request compiler move to the next line which was console.log(this.weatherData). It print the value of weather data which was undefined when declaring the variable. When response arrive compiler than assign data with this.weatherData.
I am using "react-native-track-player" for playing MP3 url in react native. But when I pass header authenticate at that time I am not able to get whole time of the MP3 url. In my screen it is necessary to show whole time of the url before player load. And also I am not able to do forward and backward action using "seekTO". for trackplayer the code is below,
var list = [currentItem].map(item => Object.assign(item,
{
artist: 'tootak',
headers: { Authorization: Global.authenticateUser },
url: item.is_local ?
('file://' + (item.url ? item.url : (item.URL ? item.URL : '')))
: Global.getMediaLink(item.url ? item.url : (item.URL ? item.URL : '')),
id: item.code,
artwork: Global.getUrl(item.images),
}))
await TrackPlayer.reset()
await TrackPlayer.add(list)
and for to seekTo ,
var time = await TrackPlayer.getposition()
await TrackPlayer.seekTo(time + 15)
They have referred to it in the docs that the library is only for streaming audio directly and to not depend on it to get something like duration.
react-native-track-player is a streaming library, which means it slowly buffers the track and doesn’t know exactly when it ends. The duration returned by this function is determined through various tricks and may not be exact or may not be available at all.
You should not trust this function. You should retrieve the duration from a database and feed it to the duration parameter in the Track Object.
We would need to use something like FFprobe or FFmpeg as a stream analyzer to retrieve the values. There is a package called get-audio-duration which does the job for you.
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 am trying to get all pictures from a folder which is called 'Pictures',
but i am getting bad request error, here is my code:
const uri = "https://api.onedrive.com/v1.0/Drive/";
$("#btLeshoto").click(function () {
//set url for the leshoto folder
url += uri + "Pictures/children?$top=1000&access_token=" + token;
loadImages();
})
function loadImages() {
$.ajax({
url: url,
dataType: 'json',
// beforeSend: function(xhr){xhr.setRequestHeader('Authorization', token);}
}).then(function (data) {
}}
I have tried using apigee, but no succes. Maybe can someone help me with this ?
Thanks.
You'll want your URL to end up looking something like this:
https://api.onedrive.com/v1.0/drive/root:/Pictures:/children
The main differences with what you currently have:
You need to specify a starting item, and so in this case we put root after drive.
To use a path you need to "switch" to the path semantics (so the URL segments won't be treated as parts of the object model), and similarly switched back to access the object model again. This is accomplished with the :