What about fetching an uploaded file? I create a button that allows user to upload file(s), then I store them in an array-like variable called fileList. So, when I want to get data from the first file of it (fileList [0]), how can I code??? Looking forward to your help. Thank you very much
@@trananhome You will need to use the File API. I haven't done a tutorial on this, but here is one article that might help: www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/
this might be useful (you still might need to run a local server like live-server in VSCode) fetch("cors-anywhere.herokuapp.com/whaetver.url/whateverfile.xml") .then(blob => blob.text()) .then(data => console.log(data))
Thank you for this tutorial! Liked and Subbed. I didn't want to set up my own server to get around the CORS issue. I tried adding `mode: "no-cors"` (parameter? setting?) to the fetch (function? object?) but I couldn't get that to work. I also tried prepending the cors-anywhere url to my xml url (you can find info on this on github) but the Heroku app that cors-anywhere uses tracks incomming traffic and will only allow 60 requests per hour. So there were apparently more than 60 requests from CodePen ... which meant it didn't work for me. For my third approach I used a Chrome extension called "Allow CORS: Access-Control-Allow-origin". That fixed the CORS issue for me and got me up and running on CodePen. One downside, if someone else tries to load my pen it won't run for them (they would have to have the Allow Cors plugin or something similar, and enable it). So if anyone knows an easy approach to get CORS working (besides setting up my own server) I'd love some advice. Thanks again for a great video!
Thanks for this great tutorial. One question remains: Is there a way to call the variable xmlDoc outside the function? I tried to declare the variable before the function, but without success.
We are just assigning the parsed data to xmlDoc that is declared inside a function. It could be any variable that the data is assigned to, so you can declare it outside the function and assign the data to it. But it may be better to call a function and pass in the data. Better structure.
@@AllThingsJavaScript Thanks a lot for your answer! To assigen the data directly to the variable declared outside of the function does somehow not work. I have it done now simply in a separate step that I equate the variable to another one declared outside. Probably it could be more elegant, but it does its job now. Thanks again!
@@mikunea You can declare a variable outside of the fetch, but the tricky thing is its a promise. So if you want to use it outside the function, you want to ensure that the fetch call has completed before assigning it to a global variable. Using async await is one way to do this. Im not an expert so theres probably a better way. But heres one way I did this: let globalXML = undefined; async function displayXML(){ console.log("the xml is:"); console.log(globalXML); } async function assignGlobal(resp){ globalXML = resp; } async function fetchXML(){ let response = await fetch('./xmlFile.xml'); await assignGlobal(response); await displayXML(); } fetchXML();
Is it possible to make a video for handling inconsistent json using javascript. or How to know that some problem is getting caused by inconsistent json data...
@@AllThingsJavaScript I faced two scenarios both were out of my scope, So, senior developers solved it: a) the task was like json data was coming from backend and i have to show that data in a grid. I did follow the process but instead of showing the json data in the grid, the data was showing random special charaters in that grid. b) It was a data grid having rows and columns, column names were there and above that there was a search bar. Column names were predefined, so that if we enter anything in that search bar then this will show data in the grid related to the entered string. However, I entered a string and two results were found.one result was matching with the string and second was not matching. after comparing two results only one number was in common between two results. So, This was like ticket. Later, I got update json data is not consistent.
@@prabhatjena5833 It is very easy to detect poorly formed XML data. It is not so easy to detect poorly formed JSON data -. JSON Schemas can help , a lot, - but not everyone uses them .
thanks this video is really useful , just what i've looking for
Couldn't get the stackoverflow answers to work, but your tutorial did the trick! Thank you!
Glad it helped!
Does it works with an XML file which is 5600 pages long ? And being loader from a website?
It should work as long as security is correct.
Great class sir! Saved my life!
Glad it helped!
What about fetching an uploaded file? I create a button that allows user to upload file(s), then I store them in an array-like variable called fileList. So, when I want to get data from the first file of it (fileList [0]), how can I code??? Looking forward to your help. Thank you very much
Not sure I understand. Are you trying to upload a file to a server?
@@AllThingsJavaScript not at all. This is the issue I need your help:
- Firstly, I upload file(s) using html
@@trananhome You will need to use the File API. I haven't done a tutorial on this, but here is one article that might help: www.geeksforgeeks.org/how-to-read-a-local-text-file-using-javascript/
@@AllThingsJavaScript thank you very much for your reply. Hope you will make video about this soon
Thank you so much sir!
Most welcome!
excellent tutorial
Thank you! But is there a way we can read a xml file sent in a request. That is when you upload an xml from the client side
Maybe this will help: ruclips.net/video/EF6Ua0cC4jY/видео.html
this might be useful (you still might need to run a local server like live-server in VSCode)
fetch("cors-anywhere.herokuapp.com/whaetver.url/whateverfile.xml")
.then(blob => blob.text())
.then(data => console.log(data))
Thanks for the contribution!
Thank you for this tutorial! Liked and Subbed. I didn't want to set up my own server to get around the CORS issue. I tried adding `mode: "no-cors"` (parameter? setting?) to the fetch (function? object?) but I couldn't get that to work. I also tried prepending the cors-anywhere url to my xml url (you can find info on this on github) but the Heroku app that cors-anywhere uses tracks incomming traffic and will only allow 60 requests per hour. So there were apparently more than 60 requests from CodePen ... which meant it didn't work for me. For my third approach I used a Chrome extension called "Allow CORS: Access-Control-Allow-origin". That fixed the CORS issue for me and got me up and running on CodePen. One downside, if someone else tries to load my pen it won't run for them (they would have to have the Allow Cors plugin or something similar, and enable it). So if anyone knows an easy approach to get CORS working (besides setting up my own server) I'd love some advice. Thanks again for a great video!
Thanks for sharing your solution to CORS issues.
Thank You
Thank you sir
So if it is not a local, can i just link to the https link?
Nevermind, got it but i got a parseerror when trying to parse it
I got it. Thank you man! Super good
Kindly sir tell me how to display xml data in a tree view form?
This tutorial may help you out: ruclips.net/video/Fkw_OlcLcwE/видео.html
Thanks for this great tutorial. One question remains: Is there a way to call the variable xmlDoc outside the function? I tried to declare the variable before the function, but without success.
We are just assigning the parsed data to xmlDoc that is declared inside a function. It could be any variable that the data is assigned to, so you can declare it outside the function and assign the data to it. But it may be better to call a function and pass in the data. Better structure.
@@AllThingsJavaScript Thanks a lot for your answer! To assigen the data directly to the variable declared outside of the function does somehow not work. I have it done now simply in a separate step that I equate the variable to another one declared outside. Probably it could be more elegant, but it does its job now. Thanks again!
@@mikunea would you be able to tell me how you did this? I'm looking to do the same but I can't get access to it outside the function
@@mikunea You can declare a variable outside of the fetch, but the tricky thing is its a promise. So if you want to use it outside the function, you want to ensure that the fetch call has completed before assigning it to a global variable. Using async await is one way to do this. Im not an expert so theres probably a better way. But heres one way I did this:
let globalXML = undefined;
async function displayXML(){
console.log("the xml is:");
console.log(globalXML);
}
async function assignGlobal(resp){
globalXML = resp;
}
async function fetchXML(){
let response = await fetch('./xmlFile.xml');
await assignGlobal(response);
await displayXML();
}
fetchXML();
Is it possible to make a video for handling inconsistent json using javascript. or How to know that some problem is getting caused by inconsistent json data...
I will look into that. Do you have some examples of what you mean by inconsistent JSON? Do you mean different files?
@@AllThingsJavaScript
I faced two scenarios both were out of my scope, So, senior developers solved it:
a) the task was like json data was coming from backend and i have to show that data in a grid.
I did follow the process but instead of showing the json data in the grid, the data was showing random special charaters in that grid.
b) It was a data grid having rows and columns, column names were there and above that there was a search bar. Column names were predefined, so that if we enter anything in that search bar
then this will show data in the grid related to the entered string.
However, I entered a string and two results were found.one result was matching with the string and second was not matching. after comparing two results only one number was in common between two results. So, This was like ticket. Later, I got update json data is not consistent.
@@prabhatjena5833 It is very easy to detect poorly formed XML data. It is not so easy to detect poorly formed JSON data -. JSON Schemas can help , a lot, - but not everyone uses them .