D4mations.com

1.2 Tabular Data – Working With Data & APIs in JavaScript



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: https://youtu.be/tc8DU14qX6I
🎥 NEXT LESSON: https://youtu.be/5-ptp9tRApM
🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X

💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS
🔗https://data.giss.nasa.gov/gistemp/
🔗https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

🚂 Website: http://thecodingtrain.com/
💖 Patreon: https://patreon.com/codingtrain
🛒 Store: https://www.designbyhumans.com/shop/codingtrain/
📚 Books: https://www.amazon.com/shop/thecodingtrain

🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: https://p5js.org
🔗 Processing: https://processing.org

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Original source

d4mer

,

47 responses to “1.2 Tabular Data – Working With Data & APIs in JavaScript”

  6. this code is giving error.
    <!DOCTYPE html>

    <html lang="en">

    <head>

    <title> chart </title>

    </head>

    <body>

    <script>

    getData();

    async function getData() {

    const response = await fetch('RNB11017MFtest.csv');

    const data = await response.text();

    console.log(data);

    }

    </script>

    </body>

    </html>
    error.
    chart.html:12 Fetch API cannot load file://. URL scheme must be "http" or "https" for CORS request.
    getData @ chart.html:12
    chart.html:12 Uncaught (in promise) TypeError: Failed to fetch
    at getData (chart.html:12)
    at chart.html:9

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

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

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

  14. Thank you for the amazing tutorials, very helpful.. My data has both numbers and text so I get undefined whenever there is a number, how do I make sure I can console log both numbers and text at the time. thank you again.

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

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

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

  26. 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('n')
    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);
    }

  28. Would "const table = await response.text().split('n').slice(1);" be a bad idea? Thinking that it might be nice to do splitting and slicing asynchronously if the file is huge.

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

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

Leave a Reply