1.2 Tabular Data - Working With Data & APIs in JavaScript 

For this to work, make sure you are running a local server! I cover how to do this with node.js here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-FjWbUK2HdCo.html

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.

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

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!

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

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

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

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

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

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.

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.

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!

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

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

Quick and simple explanation! Thanks a lot!!

Seriously learning something never felt this easy 🤩

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

No way to thank you for these contributions!

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

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

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

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

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.

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

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

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

Thank you for all the great content.

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

Wow, your videos are high quality. Thank you!

Really enjoying the course and your energy. Thank you.

You are the one! Love your energy!

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

That ending clip tho! Amazing !

Just came across your videos. Awesome stuff! Subscribed.

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

Amazing tutorial 👍

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

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

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

Amazing video Dan ! the editing was cool

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

Very good job 👍👍

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!

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

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

Yes me too...great video.

I think you will help me understand react better

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

Amazing ! Thanks Daniel.

thank you so much

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

I'd love to see your settings to vsc.

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!

THANK YOU

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

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?

you are awsome

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

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

very well :)

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

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

Geo sir

Awesome👍

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

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

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

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

You kicked the can down the road; waddaya do when you wanna use that array OUTSIDE of that async scope ??

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

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

❤️❤️❤️❤️❤️

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.

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

But what about CORS!!

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

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.

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?

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?

not sure if watching Bob Ross painting or a coding class

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

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 am getting cors error when i tried to fetch the file

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

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

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

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

just thx

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

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

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

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

Nice!

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