DEV Community: Marvellous

Converting CSV to JSON: A Quick Guide + An Online Tool

Marvellous — Thu, 26 Sep 2024 14:19:55 +0000

CSV (Comma-Separated Values) is a widely used format for storing tabular data, often seen in spreadsheets and data exchanges. While CSV is simple and effective for data storage, JSON (JavaScript Object Notation) has become the go-to format for working with structured data in web applications. Whether you're building APIs, importing/exporting data, or simply working on a JavaScript-heavy project, converting CSV to JSON is a common need.

In this article, I'll walk you through:

What CSV and JSON formats are
Why converting CSV to JSON is important
How to easily convert CSV to JSON
Introducing csvtojson.marvellous.codes – a free online tool I built for quick conversions.

What is CSV?

CSV files are plain text files that store data in rows and columns. Each line in the file represents a row, and values within the row are separated by commas. It’s a popular format for data exchange because it's simple and compatible with many tools and applications.

Example of a CSV file:

Name, Age, Occupation
Alice, 30, Developer
Bob, 25, Designer

What is JSON?

JSON, on the other hand, is a lightweight data-interchange format that's easy to read and write for both humans and machines. It's widely used in web development for transmitting data between a server and a web application, especially in REST APIs.

Example of a JSON file:

[
  {
    "Name": "Alice",
    "Age": 30,
    "Occupation": "Developer"
  },
  {
    "Name": "Bob",
    "Age": 25,
    "Occupation": "Designer"
  }
]

Why Convert CSV to JSON?

While CSV is great for basic data storage and exchange, JSON is the preferred format for modern web applications because:

JavaScript Friendly: JSON integrates seamlessly with JavaScript, making it easier to work with in front-end frameworks like React, Vue, and Angular.
Nested Data: JSON supports hierarchical and complex structures, unlike CSV which is limited to flat data.
Readability: JSON is often more readable and structured, which is beneficial when dealing with large datasets or APIs.

Methods to Convert CSV to JSON

1. Manual Conversion

For small datasets, you could manually rewrite CSV data into JSON format. However, this can be time-consuming and error-prone.

2. Using Code

There are many ways to programmatically convert CSV to JSON using different languages and libraries.

For instance, in JavaScript:

const csv = require('csvtojson');
const fs = require('fs');

csv()
  .fromFile('input.csv')
  .then((jsonObj) => {
    fs.writeFileSync('output.json', JSON.stringify(jsonObj, null, 2));
  });

This method works well for developers familiar with coding, but for non-developers or those seeking a quick, no-code solution, a web-based tool is more practical.

3. Using Online Tools

For those who don't want to deal with code or install libraries, online tools provide an easy and quick solution.

Introducing csvtojson.marvellous.codes

To simplify the CSV to JSON conversion process, I built csvtojson.marvellous.codes, a free and easy-to-use web tool that does the heavy lifting for you. No need to install software or write code – just upload your CSV file and download the JSON output.

Why Use csvtojson.marvellous.codes?

Fast & Free: Upload your CSV, get your JSON – simple!
No Installation: Access the tool from any browser without worrying about installations.
Open & Transparent: The tool is straightforward, and your data isn’t stored after conversion.
For Developers and Non-Developers: Whether you're a seasoned developer or someone just looking to convert a CSV file quickly, this tool fits your needs.

How to Use It

Visit csvtojson.marvellous.codes.
Upload your CSV file.
Click "Convert".
Download the JSON file generated.

It’s as simple as that!

Conclusion

Converting CSV to JSON is a common task in web development, especially when working with APIs and JavaScript applications. Whether you choose to use code or tools like csvtojson.marvellous.codes, understanding both formats is essential for modern data handling.

Give the tool a try, and feel free to share any feedback. Happy coding!

How to create a container component

Marvellous — Tue, 09 Aug 2022 12:45:00 +0000

Need to create a component that can take in other components/elements as children or just a component that wraps your app? Well you're in luck, here's a short tutorial on how to do it.

A really straight to the point answer is having your component have a prop with a type JSX.Element

const Card = ({ children }: { children: JSX.Element }) => {
  return (
     <div>
       { children }
     </div>
  );
};

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>

      <Card>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
        <h2>This Component can take children</h2>
      </Card>
    </div>
  );
}

Fixing ClassName did not match error

Marvellous — Wed, 09 Mar 2022 20:33:32 +0000

Warning: Prop `className` did not match. Server: Client:

This is probably one of the most annoying problem with Next.js, Typescript and styled-component luckily there's a work around for this.

You're gonna need to install babel-plugin-styled-components

yarn add --dev babel-plugin-styled-components

Create a file named .babelrc in the root directory and configure it. Here's the config file.

{
    "presets": [
        "next/babel"
    ],
    "plugins": [
        [
            "styled-components",
            {
                "ssr": true,
                "displayName": true,
                "preprocess": false
            }
        ]
    ]
}

Restart your server and refresh your server and you should be good.

Here's the issue on Github

Ciao

CSS StyleSheets

Marvellous — Wed, 09 Dec 2020 14:52:03 +0000

The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets. Some browsers use actual style sheets for this purpose, while others simulate them in code, but the end result is the same.

Some browsers let users modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To simplify the development process, Web developers often use a CSS reset style sheet, forcing common properties values to a known state before beginning to make alterations to suit their specific needs.

Author stylesheets are style sheets that define styles as part of the design of a given web page or site. The author of the page defines the styles for the document using one or more stylesheets, which define the look and feel of the website — its theme

The user (or reader) of the website can choose to override styles in many browsers using a custom user stylesheet designed to tailor the experience to the user's wishes.

Learn more from MDN

HTML & CSS Comments

Marvellous — Sat, 29 Aug 2020 21:46:43 +0000

Writing lots of lines of code and you're worried you might not understand your code next week?

Want to make your project understandable to other programmers?

Comments are the way to go about it. A comment is a programmer-readable explanation or annotation in the source code of a computer program.

Comments are added to make the source code easier for humans to understand and are generally ignored by compilers and interpreters.

Comments are started with a language-specific symbol

HTML5

<!--This is a comment -->

CSS

/* This is a comment */

JavaScript

//This is a comment

When to use comments

"A handy rule of thumb is: a comment should only be added to answer a question that the code can't. If you aren't confused by what a piece of code is doing, but rather why it's doing it at that moment, then a comment should be added." - Mark Cronin

Comments can be placed wherever white space is allowed within a style sheet. They can be used on a single line, or traverse multiple lines. This allows commenting inside a block of code and between a group of codes. What matters is making your code glanceable.

/* A one-line comment */

/*
A comment
which stretches
over several
lines
*/

Note

The /* */ comment syntax is used for both single and multiline comments. There is no other way to specify comments in external style sheets.