How to Build a Simple JSON Parser in JavaScript

JSON, or JavaScript Object Notation, is a lightweight data-interchange format that is easy to read and write. We often encounter it while working with APIs and server-side data. Let's delve into the intricacies of parsing JSON, step by step.

Addressing Edge Cases: Simple Types and Errors

Why Handle Edge Cases?

Before we even think about parsing complex objects or arrays, let's handle some edge cases. These are simple data types or even errors that might make our parser trip if we don't deal with them first.

How to Handle?

We'll use if statements to check if our input string is one of these edge cases and return the corresponding JavaScript object.

1if (input === "" || input[0] === "'") {
2    throw Error("Invalid JSON string");
3}
4if (input === "null") {
5    return null;
6}
7if (input === "{}") {
8    return {};
9}
10if (input === "[]") {
11    return [];
12}
13if (input === "true") {
14    return true;
15}
16if (input === "false") {
17    return false;
18}

Parsing JSON Strings

The Importance of Quotation Marks

When parsing JSON data, a key or a string value is always wrapped between double quotation marks. This is our cue to focus on them.

The Parsing Technique

We use slice(1, -1) to get the content between the quotation marks, and we check if the first character is a quotation mark (") to know when to do this.

1if (input[0] === '"') {
2    return input.slice(1, -1);
3}

Parsing JSON Objects

The Curly Braces

In JSON, objects are wrapped in curly braces {}. This will be our signal to dive deeper and parse the properties inside it.

The Approach

1. Slice the Braces: Remove the starting and ending curly braces.
2. Split Properties: Split the string by commas to get individual "key": "value" strings.
3. Key-Value Parsing: Use indexOf(":") to find where the key ends and the value starts, then slice the string to get both parts.
4. Recursive Parsing: We call the parse function recursively to handle nested objects.

1if (input[0] === "{") {
2    return input
3        .slice(1, -1)
4        .split(",")
5        .reduce((acc, item) => {
6            const index = item.indexOf(":");
7            const key = item.slice(0, index);
8            const value = item.slice(index + 1);
9            acc[parse(key)] = parse(value);
10            return acc;
11        }, {});
12}

Parsing JSON Arrays

Square Brackets

In JSON, arrays are enclosed in square brackets []. This is our signal to parse them as arrays.

Steps to Parse

1. Slice the Brackets: We remove the opening and closing square brackets.
2. Split Elements: Then, we split the string by commas to get individual array elements.
3. Recursive Parsing: We call the parse function recursively for each element to handle nested arrays.

1if (input[0] === "[") {
2    return input
3        .slice(1, -1)
4        .split(",")
5        .map((x) => parse(x));
6}

The Final Code: Putting It All Together

Here's the complete function. It incorporates all the above steps to make a fully functional JSON parser in JavaScript.

1function parseJSON(input) {
2    // Edge Cases and Error Handling
3    if (input === "" || input[0] === "'") {
4        throw Error("Invalid JSON string");
5    }
6    if (input === "null") { return null; }
7    if (input === "{}") { return {}; }
8    if (input === "[]") { return []; }
9    if (input === "true") { return true; }
10    if (input === "false") { return false; }
11
12    // Parsing Strings
13    if (input[0] === '"') {
14        return input.slice(1, -1);
15    }
16
17    // Parsing Objects
18    if (input[0] === "{") {
19        return input
20            .slice(1, -1)
21            .split(",")
22            .reduce((acc, item) => {
23                const index = item.indexOf(":");
24                const key = item.slice(0, index);
25                const value = item.slice(index + 1);
26                acc[parseJSON(key)] = parseJSON(value);
27                return acc;
28            }, {});
29    }
30
31    // Parsing Arrays
32    if (input[0] === "[") {
33        return input
34            .slice(1, -1)
35            .split(",")
36            .map((x) => parseJSON(x));
37    }
38}

And there you have it—a JSON parser built from scratch.

One Pager Cheat Sheet

• You can implement your own version of the JSON.parse() method, called parseJSON, that accepts one parameter and can return one of the following: array, object, string, number, boolean, or null.
• By defining multiple if cases to check for null, empty objects, arrays or booleans and additional parsing of values inside quotes and brackets, we can create a JSON Parser in JavaScript.

This is our final solution.

To visualize the solution and step through the below code, click Visualize the Solution on the right-side menu or the VISUALIZE button in Interactive Mode.

xxxxxxxxxx

}

function parseJSON(input) {

​

    // if the input is empty or starts with an invalid character, throw an error

    if (input === "" || input[0] === "'") {

        throw Error();

    }

​

    // check if the input is null, an empty object, empty array, or a boolean and return the value from the input

    if (input === "null") {

        return null;

    }

    if (input === "{}") {

        return {};

    }

    if (input === "[]") {

        return [];

    }

    if (input === "true") {

        return true;

    }

    if (input === "false") {

        return false;

    }

​

    //if the input starts with a quote, return the value from inside the quotes

    if (input[0] === '"') {

        return input.slice(1, -1);

    }

​

    // if it starts with a bracket, perform parsing of the contents within the brackets

    if (input[0] === "{") {

        return input

Alright, well done! Try another walk-through.

If you had any problems with this tutorial, check out the main forum thread here.