1.2 Tabular Data - Working With Data & APIs in JavaScript

[@TheCodingTrain]

For this to work, make sure you are running a local server! I cover how to do this with node.js here: kzbin.info/www/bejne/fJu6k4iBZ62XedE

[@digigoliath]

No wonder. LOL

[@atyourservice5728]

csv vs sql table?

[@choudharyusama7474]

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

[@craigtcooper777]

@@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! :)

[@anandarya4664]

@@choudharyusama7474 ya that may due its cache

[@prernasharma3439]

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.

[@TheCodingTrain]

Thank you for the nice feedback!

[@kenfeier5542]

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!

[@BradleyDunlap]

Great production in this video Daniel! Congrats to your editor. Also, great presentation by you per usual.

[@sajintamang1037]

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

[@blusanders]

6 weeks into sw bootcamp. Really enjoy the videos. Easy to understand and fun to watch.

[@ritwikbaksi8407]

Honestly was confused by the array portion and didn't expect you to go back and explain it again. Thanks so much.

[@Djzaamir]

I really love this new editing style, where the references are popping out in the back as you talk :) Good Job Coding Train

[@sorrychou]

簡單明確的步驟處理csv資料，對初學者非常好👍

[@alanalencar]

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.

[@mehmeteminyldz5750]

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.

[@pulok9909]

My teacher who I really love. Thanks for your great teaching with always smile on the face.

[@programming-dude]

really love your teaching style make me smile at your expression

[@andrewlawton7415]

Its about time somebody explains this and it makes REAL sense! kudos!

[@shashankthapa659]

One of the best video so far on API's enjoying the course. Thanks Daniel!😇

[@SumitGupta-ys7lb]

Quick and simple explanation! Thanks a lot!!

[@richardramirez5746]

No way to thank you for these contributions!

[@RupertBruce]

Thank you for the RainbowCSV link - it's got a lot more than just a rainbow - a veritable pot of gold!

[@nelnav1222]

I love this channel, I dont know English but Im understanding

[@cesaremannino2774]

I`m coming from Django, Kudos to the teacher to make node.js so understandable! so far is easier than Django...

[@user-yq2em5ho9q]

Seriously learning something never felt this easy 🤩

[@kdog.unleashed]

Just want to thank you for all your great work. You helped me so many times! Thank you! Greetings from berlin!

[@schitlipz]

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]

[@shubhrashukla7879]

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!

[@TheCodingTrain]

Yeah, this is an experiment. . but I'm still going to do my raw live streams!!!

[@filcondrat]

what is that all about

[@GilbertBigelow]

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.

[@jamesa.]

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,

[@heatherjackson920]

Wow, your videos are high quality. Thank you!

[@grainfrizz]

Dan, don't be afraid to say that 🐼 is a level 11 cuteness. :)

[@DioArsya]

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! :)

[@CarlosLopez-tm7bp]

You are the one! Love your energy!

[@rotrose7531]

Thank you for unfailingly providing these great stuff. I always learn a lot from you.

[@juansantiagocuadra3672]

Thank you for all the great content.

[@anishnair7348]

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. 😍

[@kindlyman100]

the writing of the code is readable, a very elite thing

[@JasonLayton]

Really enjoying the course and your energy. Thank you.

[@madhavjha5289]

Amazing tutorial 👍

[@ashutoshagrawal3076]

hi Madhav I am Ashutosh Agrawal.

[@arielspalter7425]

Just came across your videos. Awesome stuff! Subscribed.

[@heksqer1022]

Amazing video Dan ! the editing was cool

[@frankberry184]

I think you should do videos on react too cause i love the way you teach. you are good. Am actually learning react though

[@albertofantozzi7804]

That ending clip tho! Amazing !

[@wfalcao69]

WOW!!!!! You are my best friend.

[@ridvankadayifci6100]

Very good job 👍👍

[@City__Walker]

Ohh i need this for my project (made charts as in power bi upload data and create chart use uploaded data)😍😍

[@nicotomomate]

I randomly get this video playing and said "this guy is a great teacher".. Then i realized you have 1 millions suscribers 😂

[@poornaathreya]

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🤧👍🏼

[@Hamid-lo4wu]

I am getting the same error ... If you found the solution , please let me know, thanks

[@melissabarrera7176]

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! :)

[@Hamid-lo4wu]

@@melissabarrera7176 yes It's the right solution... I fixed it later & I finished my work .... Thank u for your answer

[@VincentFS]

@@melissabarrera7176 THANK YOU

[@walkastray007]

Everyone gets a nickle every time Dan says "beyond the scope of this video" every video

[@abazur7742]

If you are going to make more high quality tutorials like this one, you will it 1mil subs soon

[@laalaajonsen]

aaaand it's done!

[@michalbotor]

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?

[@alekseiterin988]

Just google it

[@prithwirajdutta3827]

Amazing ! Thanks Daniel.

[@oumao]

You can as well refactor the columns data by performing an array destructuring such that const [year, temp] = columns;

[@sciencefordreamers2115]

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

[@matther2012]

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!

[@TheCodingTrain]

Ah, good point!

[@frankberry184]

I think you will help me understand react better

[@omarsh82]

Yes me too...great video.

[@chubbyBunny94]

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!

[@TheCodingTrain]

Great work!!

[@Dasrecord]

how did the get data function execute before it was defined?

[@bedrockcoder5169]

Is there a way to get the data straight from the website?

[@atulonweb1]

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.

[@alexanderbell7736]

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 :)

[@HungrySpinz]

Wish there was this quality of content for asp.net/c# microsoft related stuff

[@AZAMKHAN-vl4lq]

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

[@martinb3523]

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.

[@Altamashattari786]

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

[@junky3445]

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?

[@matissjudins6272]

thank you so much

[@clandestine1699]

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 ???

[@TheCodingTrain]

Weird, maybe I'm referencing the incorrect file or I downloaded the wrong file by accident while making the video?

[@PaulMcCannWebBuilder]

It looks like they've updated the data since the video.

[@jefersonfs]

Hi teacher! Cheers from Brazil! Look, can you tell me how can I export the data into a json file?

[@iNuchalHead]

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.

[@TheCodingTrain]

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!

[@oliviamooney8995]

I'd love to see your settings to vsc.

[@nileshgurung9437]

Awesome👍

[@avneetsingh2010]

very well :)

[@OLSCGMS]

I am getting cors error when i tried to fetch the file

[@OLSCGMS]

@The Coding Train

[@shyamsoni5389]

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

[@rubyna5472]

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...

[@techzee9000]

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

[@waverwind1]

I have the same problem

[@techzee9000]

@@waverwind1 Have u solved it , what did u do

[@waverwind1]

@@techzee9000 yes, I use Visual Studio Code and installed the extension Live Server (see here kzbin.info/www/bejne/r2XUooSbiql2eLM) Right click on the repository and open with Live Server. Good Luck!

[@techzee9000]

@@waverwind1 thanksss

[@blackmilk86]

@@waverwind1 thanks!!!

[@sup9140]

How to take the csv directly from website without from local file?

[@saifahmad5777]

you are awsome

[@maximillienkwizera4167]

am using Atom editor and its live server can not switch to different file. it only loads one file. ANY HELP??? @The codin train

[@sarfrazrajpoot2055]

Geo sir

[@AbhishekSharma-uy1zv]

Fetch Api cannot load the url Url scheme file is not supported error

[@Lumenified]

Great tut Shiffman, you shiff us to the next level >.< (i know its a bad joke :D)

[@chamnil8666]

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?

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

[@TheCodingTrain]

For this to work, you need to be running a local server! I should have made this more clear, see: kzbin.info/www/bejne/fJu6k4iBZ62XedE

[@munandisichali605]

Thanks for the best way to learn codding, can you do a livechart with chart.js, or protly.js....

[@TheCodingTrain]

Next video uses chart.js!

[@imransefat8770]

Thank you

[@BobbyBundlez]

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

[@martinb3523]

i think you need to start a live server in your text editor, then it will probably work.

[@iminni3459]

Could you put a link to rainbow CSV in the description please?

[@TheCodingTrain]

added!

[@iminni3459]

Thank you!

[@smile4992]

const response = await fetch(csv_url); const csv = await response.text(); const json = Papa.parse(csv).data;

[@josephyou4461]

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?

[@maxdegreat566]

did u ever figure it out?

[@martinb3523]

​@@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.

[@DA-rf7zj]

Just so you know, VS Code doesn't really handle local files like the test.cvs file you use.

[@brisedev]

not sure if watching Bob Ross painting or a coding class

[@teebu]

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');

[@amirsohel9260]

it's giving me error when I am giving CSV path in Fetch

[@augischadiegils.5109]

❤️❤️❤️❤️❤️

[@OonHan]

Yes!!!

[@madr3563]

how to create csv file?

[@anuraghazra4772]

Nice!

[@saibadam]

I cant fetch without http??

[@hakata8889]

just thx

[@DigitalMonsters]

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); }

[@anishagrawal7068]

But what about CORS!!

[@jnsjknn]

Exactly.

[@AlexMerlin1985]

That's beyond the scope of this video :)

[@anishagrawal7068]

@@AlexMerlin1985 Is there a viable soln. to client sided CORS?

[@gouravchouhan1790]

Why didn't u used console.table(), I was desperately waiting for that since I was following along, next time......