Display CSV data in Table

  • Owner: Smaug
  • Difficulty:
  • Type: Feature
  • Asigned to: Me
  • Date Created: Apr 28, 2017
  • Priority: Major
  • Status: New
  • Resolution: Unresolved

Tags: CSS HTML JavaScript AJAX

Description

Download some customer data from a CSV file and display it, the file is located on ./data/customers.csv.

The columns have the data in this order: Id, First Name, Last Name, Email, Job Title, City.

Make a web request to get the file, this will get the file information as a String, parse the content, and then add every row to the table, inside the tbody tag.

Feel free to use modern methods like fetch and only test on modern browsers.

Extra Points

For extra points, use only vanilla Javascript.

Use fetch and promises.

Use the map function instead of a for loop.

Separate every piece of functionality into its own function.

Feel free to make design improvements where you consider appropriate.

Attachments

  • This challenge does not have any attachments.

Technical Notes

You can make a regular web request to retrieve the contents of the file as a string.

There are several ways to go about this, frameworks, libraries or alternatives, feel free to use whatever you're more comfortable with but we recommend you try something new or challenging.

Array operations tend to be faster than String operations on Javascript, definitively don't use Regular Expressions, splits and joins are more effective than concatenation and parsing a String of that size with Regular Expressions is either impossible or way too slow.

When you're done, push to your repo and submit your answer.

Publish your site for free on Github pages or Firebase Hosting

When you're done, push to your repo and submit your answer.

Source:

Procedure:

Requirements

Add your code to scripts/app.js and push to your fork.

Look at our learning section for more information.

Look at our help section for more information about this.

Coding

To create your answer follow this steps:

  • Fork the repo to your account, or download the zip file
  • Solve the ticket
  • Commit your code
  • Push your changes
  • Publish your version in Github Pages
  • Submit your response

Troubleshooting | Help

If you have need clarification with the project, files, or description, open an issue on github.

For questions with the platform, email us at [email protected]

For help with github or coding, consult our Learning and Resources page, where you will find information and links to tutorials and other content.