1.2 Tabular Data - Working With Data & APIs in JavaScript
ฝัง
- เผยแพร่เมื่อ 11 ก.ย. 2024
- Welcome to Working with Data and APIs in JavaScript!
This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? The course will be taught through a series of creating three data projects.
If you haven’t watched the first part of the lesson, do that first!
This second part of the lesson looks at loading and parsing a CSV file (comma-separated values) with the web fetch() API.
🎥 PREVIOUS LESSON: • 1.1: fetch() - Working...
🎥 NEXT LESSON: • 1.3: Graphing with Cha...
🎥 FULL COURSE: • Working with Data and ...
💻github.com/Cod...
🔗data.giss.nasa...
🔗marketplace.vi...
🚂 Website: thecodingtrain....
💖 Patreon: / codingtrain
🛒 Store: www.designbyhu...
📚 Books: www.amazon.com...
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 Processing: processing.org
📄 Code of Conduct: github.com/Cod...
For this to work, make sure you are running a local server! I cover how to do this with node.js here: th-cam.com/video/FjWbUK2HdCo/w-d-xo.html
No wonder. LOL
csv vs sql table?
Hello
I am facing a problem
I try to load csv file and when i update the csv file and refresh my browser the data can't updated unless I refresh the browser by ctrl f5
@@choudharyusama7474 He's using a cool extension in vscode called Live Server marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Which is making it so that it's a live reload. Hope that helps! :)
@@choudharyusama7474 ya that may due its cache
You know what? I'll come to the video and content later, Firstly I want to say you are such a nice person. It's like you are enjoying work and always happy and in a jolly mood. That makes learning fun. Thank you for making JavaScript interesting.
Also, the content is so good and the videos are so interesting.
Thankyou.
Thank you for the nice feedback!
I love that you break down everything so simply and show implementation using code. You make learning this stuff a lot easier than it was for me in college. Let alone you've taught me more!
Great production in this video Daniel! Congrats to your editor. Also, great presentation by you per usual.
6 weeks into sw bootcamp. Really enjoy the videos. Easy to understand and fun to watch.
This guy is absolute nuts. Best content for API ever on internet. May god bless you and family man . your videos has really helped me a lot
Honestly was confused by the array portion and didn't expect you to go back and explain it again. Thanks so much.
I really love this new editing style, where the references are popping out in the back as you talk :) Good Job Coding Train
is that the dan that i knew who always made mistakes? I don't know when you got so professional but it looks really cool and the production and editing were at another level. sooooo kudos to you!
Yeah, this is an experiment. . but I'm still going to do my raw live streams!!!
what is that all about
簡單明確的步驟處理csv資料，對初學者非常好👍
Dan, thank you a lot for this great video. I love the way you teach. Instead of publishing videos where everything goes perfect, you make mistakes and correct them. Actually, that is the way how people learn things.
Hello, I couldn't leave a message of congratulations for you. Simply the best. Direct, clear, didactic and simply outstanding. Watching everything from here in Brazil.
My teacher who I really love. Thanks for your great teaching with always smile on the face.
Its about time somebody explains this and it makes REAL sense! kudos!
really love your teaching style make me smile at your expression
Quick and simple explanation! Thanks a lot!!
For handling/ removing the header Instead of using slice just start the 'for loop' at 1 and you will not add extra processes to the code.
I am just an amateur and not trying to critique your work just making an observation while learning from you many other things I have yet to put together.
Mr. Shiffman, Thanks for the great learning tools you provide.
Oh Yes I totally get your point sir! good one, also we might notice that he later went on to user forEachLoop which start from the first element. :) , but the way you described it is also a nice alternative I must say,
Dan, don't be afraid to say that 🐼 is a level 11 cuteness. :)
One of the best video so far on API's enjoying the course. Thanks Daniel!😇
My fetch isn't working. Every time it says the following error:
Try.html:10 Fetch API cannot load file. URL scheme must be "http" or "https" for CORS request.
Any help would be welcome🤧👍🏼
I am getting the same error ... If you found the solution , please let me know, thanks
maybe this is a little too late to be answering, but to who it may concern... it needs to be hosted on a live server somewhere for the Fetch API to work correctly. Instead of opening on default browser, you can install 'Live Server' (a VSCode extension) and open it with that! :)
@@melissabarrera7176 yes It's the right solution... I fixed it later & I finished my work .... Thank u for your answer
@@melissabarrera7176 THANK YOU
Seriously learning something never felt this easy 🤩
Just want to thank you for all your great work. You helped me so many times! Thank you! Greetings from berlin!
Thank you for all the great content.
Really enjoying the course and your energy. Thank you.
No way to thank you for these contributions!
Thank you for the RainbowCSV link - it's got a lot more than just a rainbow - a veritable pot of gold!
Thank you for unfailingly providing these great stuff. I always learn a lot from you.
Thanks. I needed to know a lot of the details in this video. [Never mind, even running a local server isn't satisfying it no more]
I`m coming from Django, Kudos to the teacher to make node.js so understandable! so far is easier than Django...
You are the one! Love your energy!
Wow, i used to work with data like this in Python when i'm working with my ML and DL projects back then. Now i want to learn javascript and vuejs for my website projects, and guess what. I'm learning data manipulation again here in another concepts of language. Hahaha thank you, sir! :)
I love this channel, I dont know English but Im understanding
Amazing tutorial 👍
hi Madhav I am Ashutosh Agrawal.
Wow, your videos are high quality. Thank you!
the writing of the code is readable, a very elite thing
I think you should do videos on react too cause i love the way you teach. you are good. Am actually learning react though
Thank you so much sir. Your video on api and fetch() helped me to complete my project. You have explained it so nicely and in simple way for beginners. 😍
That ending clip tho! Amazing !
Just came across your videos. Awesome stuff! Subscribed.
I randomly get this video playing and said "this guy is a great teacher".. Then i realized you have 1 millions suscribers 😂
If you are going to make more high quality tutorials like this one, you will it 1mil subs soon
aaaand it's done!
You can as well refactor the columns data by performing an array destructuring such that
const [year, temp] = columns;
Amazing video Dan ! the editing was cool
Ohh i need this for my project (made charts as in power bi upload data and create chart use uploaded data)😍😍
Very good job 👍👍
Is there a way to get the data straight from the website?
Absolutely awesome! However, I lost an hour before I realized I had to Disable Same Origin Policy to get rid of the browser error I was getting. The sequence to do this : about:config -> security.fileuri.strict_origin_policy -> false
WOW!!!!! You are my best friend.
Seems like this example could have made use of the map function, instead of the forEach and all of the const variables. Great video as always!
Ah, good point!
Everyone gets a nickle every time Dan says "beyond the scope of this video" every video
I think you will help me understand react better
Yes me too...great video.
Wish there was this quality of content for asp.net/c# microsoft related stuff
Amazing ! Thanks Daniel.
question: where do javascript variables live anyways? are they maybe allocated in a ram reserved for the bowser's tab, or separately? is there a limit to how much % of ram one tab can occupy, or can it take the whole ram or maybe be even stored on a hard drive if it needs be? is the transfer of the data from/to ram to/from browser slower than the transfer of the data from/to ram to/from desktop app would be, like say python ide?
also: is this csv file fetched only once, or is it being fetched repeatedly?
Just google it
Hey Dan, I don't see the solution for getting multiple files in the git repo. I'm also not sure if you want us to fetch a directory of images and then display those, or just create two fetch commands for unique files. One is simple, the other I can't solve.
Thanks for another enjoyable, informative video :)
hello sir ,,
can we fetch data direct from fetch("htttps://xyz") withoout saving in our cvs file in code editor,,if yes how can i do this? please reply
i think not, you probably need a proxy. Like for the image in the last video i tried to get it online and CORS yelled at me XD so i researched it and it happened to be that you need another server to serve you the info that youre requesting from the other server. Look up "CORS anywhere" and try it with that.
thank you so much
I couldn't able to use fetch(). Getting error in console on CORS. I tried to remove CORS its not worked for me. How to read local file using fetch. Could you please any one help me? Thanks in advance
Are you running a local server? I definitely need to make this more clear! More here: th-cam.com/video/FjWbUK2HdCo/w-d-xo.html
Oops I miss this video. Thanks for your reply
I'm getting a cannot find variable error for Chart in the myChart function that displays the table idk why, its declared as a new variable so idk why and tried to call it as a global variable but still doesn't work. Any recommendations?
Geo sir
very well :)
Hi teacher! Cheers from Brazil! Look, can you tell me how can I export the data into a json file?
THANK YOU
Awesome👍
I'd love to see your settings to vsc.
I was following along, but I was wondering why my temp data was different than yours? Example, 1880 , -.19 and 1881, -.10: Your set shows 1880, -.18 and 1881, -.09 ???
Weird, maybe I'm referencing the incorrect file or I downloaded the wrong file by accident while making the video?
It looks like they've updated the data since the video.
What if your CSV strings contain newline character or comma character in the data then splitting based on those characters will lead to unexpected results
Hello Code train, thanks for all your presentations they are interesting and educative. I got an error when trying to load the csv on console.log ( Fetch API cannot load file:/// URL scheme must be "http" or "https" for CORS request.
getData @ index.html:18
I have the same problem
@@waverwind1 Have u solved it , what did u do
@@techzee9000 yes, I use Visual Studio Code and installed the extension Live Server (see here th-cam.com/video/y4qqQeUDCBQ/w-d-xo.html)
Right click on the repository and open with Live Server. Good Luck!
@@waverwind1 thanksss
@@waverwind1 thanks!!!
hi coding train...i have a hard time to fetch the csv file...the console always show fetch api cannot load eventhough i save it in the same file directory...can you tell me how to fix this...
how did the get data function execute before it was defined?
Fetch Api cannot load the url
Url scheme file is not supported error
you are awsome
data.split(/
/),didnt work,since data is not a string,when i check typeof data it gives me an object.how do i turn object to string?
Hi, I am using
this.props.history.push({
pathname:`some path`,
state:{ object :object}
}) ;
on handleSubmit click
And reading the data into routed component like
this.props.location.state.objectName.field
This is working fine when I am using BrowserRouter even when i refresh the page i get the values on page BUT when I am using Hashrouter and I refresh the page I get error saying
Can not read properties of undefined
Please help
You kicked the can down the road; waddaya do when you wanna use that array OUTSIDE of that async scope ??
am using Atom editor and its live server can not switch to different file. it only loads one file. ANY HELP??? @The codin train
Yes!!!
I want user of my website to be able to upload data and make have option to make different type of charts. I am researching on that, any idea how to achieve that.
Just so you know, VS Code doesn't really handle local files like the test.cvs file you use.
I am getting cors error when i tried to fetch the file
@The Coding Train
I paused the video at 3:50. It took me 2hours and 45 mins to do it myself. I created functions that create a table and inject the headings and data. So noob :'D but progress!
Great work!!
How to take the csv directly from website without from local file?
it's giving me error when I am giving CSV path in Fetch
Would "const table = await response.text().split('
').slice(1);" be a bad idea? Thinking that it might be nice to do splitting and slicing asynchronously if the file is huge.
Interesting! I think that would work, sometimes I break things into multiple lines just for clarity. But chaining can make a lot of sense too!
Great tut Shiffman, you shiff us to the next level >.< (i know its a bad joke :D)
Do i need some import function or something? This fetch method throws me an error "index.html:15 Fetch API cannot load file:////////test.csv. URL scheme must be "http" or "https" for CORS request." Pls help
For this to work, you need to be running a local server! I should have made this more clear, see: th-cam.com/video/FjWbUK2HdCo/w-d-xo.html
But what about CORS!!
Exactly.
That's beyond the scope of this video :)
@@AlexMerlin1985 Is there a viable soln. to client sided CORS?
❤️❤️❤️❤️❤️
I cant fetch without http??
Thanks for the best way to learn codding, can you do a livechart with chart.js, or protly.js....
Next video uses chart.js!
Nice!
just thx
how to create csv file?
how do i just download this csv i cant seem to do that of github to practice with it.... or any csv for that matter... i cant fetch locally like he did in this tutorial. stupid question but still ! fetch('test.csv') wont work even if i have the file locally
i think you need to start a live server in your text editor, then it will probably work.
const response = await fetch(csv_url);
const csv = await response.text();
const json = Papa.parse(csv).data;
I parsed it like this but its really hard to read i think.
async function getData() {
const csv = await fetch('./global_temps.csv')
const text = await csv.text()
let raw_table = text.split('
')
let raw_headers = raw_table.splice(0, 1)[0]
let parsed_data = raw_table.map(row => {
let columns = row.split(',')
let headers = raw_headers.split(',')
return headers
.map((header, index) => {
return { [header]: columns[index] }
})
.reduce((acc, item) => {
const key = Object.keys(item)[0]
const value = item[key]
acc[key] = value;
return acc
}, {})
});
parsed_data.splice(-1, 1);
}
I download .csv file and saved it on the same directory with .html folder. but it is not work. Where is the right place to save csv file?
did u ever figure it out?
@@maxdegreat566 you save it there but you need to open a local/live server from your text editor and it should work. Or get the link to the info and use a proxy like "CORS anywhere" to get the data.
i love you
A few people ask how to get it from the remote url. While not pretty, using a middle service that adds the needed cors is one way. fetch('cors-anywhere.herokuapp.com/data.giss.nasa.gov/gistemp/tabledata_v4/ZonAnn.Ts+dSST.csv');