Import table from csv file


I’m just starting to learn about web development and have already gone through a couple of online courses for HTML/CSS and some JavaScript. I’m in the middle of my first project for the freeCodeCamp HTML/CSS course.

I’m trying to help a non-profit with their website. It seems I’m the most technical volunteer they have.

There is an Excel spreadsheet containing a schedule of events for the calendar year. For last year’s schedule, I saved the file in .html format and got a file with each line marked up with

and tags. I then manually edited the file to get the desired markup.

I understand how to manually make a table with HTML tags. What I’m trying to do is avoid doing it manually. Ideally, I would write some code to read the file and have the code mark up the text.

Since I’m just getting started, I don’t know what I don’t know. Since freeCodeCamp introduced me to bootstrap, I used it on last year’s table and that worked well.

But this time I wanted to allow the table to expand when you click on the month and only display that month. There are other filters I would like to apply using a drop-down. I’ve seen how bootstrap can be used for this. So I understand the markup needed.

What I don’t know is what tools are available to create a filter to import this file.

Since I’m just getting started, I’m trying to stay away from the various frameworks like Angular, React and Vue. But maybe it’s time to pick one. Or maybe there is more to Javascript or jQuery I have yet to learn.

Sorry for the length of the question. I look forward to getting some direction from the community. I’ll update my profile to include my CodePen page.


Just add your Codepen link to your post (you can edit your post) or just reply back with your Codepen link. That way we can see what you have tried already.

@RandellDawson, good feedback. I have edited the post to add my CodePen link, but I haven’t done anything on CodePen for this project yet.

I appreciate how it will be a useful tool for sharing what I have done.

I’m sure there are a number of libraries around for converting a csv to JSON if you don’t want to handle it manually.

I suggest you start with Free Code Camp’s basic JavaScript and go through at least the Intermediate Algorithm challenges before trying to tackle this one. You need to know the basics before you move on to more advanced solutions such as the one you are wanting to create. There are many external libraries which do the heavy-lifting of the actual import, but you will have to decide if you want to import the file via back-end on the server or front-end where you use an input element with type=“file” where you would manually have to manually select the csv on your computer and then the your import would use that field to get the file.

1 Like

When I said I don’t know what I don’t know the emphasis would be on web development. I’m very comfortable with sysadmin tasks and the command line in Linux.

I know I could write a script in Python or even Bash to read the file and output the result as tagged HTML. But I also know that is not the right solution.

If you are saying JavaScript has the tools to solve this problem, then you have answered my question.

I see Basic JavaScript is my next course in the freeCodeCamp curriculum. I’ll stay the course and let you know when I post my solution.