How to JSON Stringify an Array of Objects in JavaScript ?

In JavaScript, the array of objects can be JSON stringified for easy data interchange and storage, enabling handling and transmission of structured data. The below approaches can be utilized to JSON stringify an array of objects.

Using JSON.stringify with a Replacer Function

In this approach, we're using JSON.stringify method with a replacer function to transform specific properties of objects during JSON serialization. Here, the replacer function checks if a property's value is a string and converts it to uppercase.

Syntax:

JSON.stringify(value, [replacer, [space]])

Example: The below example uses JSON.stringify with a Replacer Function to JSON stringify an array of objects in JavaScript.

const data = [
    {
        language: 'JavaScript',
        category: 'Web Development'
    },
    {
        language: 'Python',
        category: 'Data Science'
    },
    {
        language: 'Java',
        category: 'Software Development'
    }
];
const res = JSON.stringify(data, (key, value) => {
    if (typeof value === 'string') {
        return value.toUpperCase();
    }
    return value;
});
console.log(res);

Output:

[
    {"language":"JAVASCRIPT","category":"WEB DEVELOPMENT"},
    {"language":"PYTHON","category":"DATA SCIENCE"},
    {"language":"JAVA","category":"SOFTWARE DEVELOPMENT"}
]

Using a Custom Function for JSON Stringify

In this approach, we're using a custom function approach2Fn to recursively stringify an array of objects, handling objects, arrays, and primitive values to construct a valid JSON string representation. The function checks the type of each item in the data and applies the stringify logic accordingly.

Syntax:

function customStringify(data) {
 // code
  return jsonString;
}

Example: The below example uses Custom Function for JSON Stringify to json stringify an array of objects in javascript.

const data = [
    {
        language: 'JavaScript',
        category: 'Web Development'
    },
    {
        language: 'Python',
        category: 'Data Science'
    },
    {
        language: 'Java',
        category: 'Software Development'
    }
];
const res = approach2Fn(data);
console.log(res);

function approach2Fn(data) {
    if (Array.isArray(data)) {
        const sArr = data.map
            (item => approach2Fn(item));
        return `[${sArr.join(',')}]`;
    } else if (typeof data === 'object' 
        && data !== null) {
        const sObj = Object.entries(data)
            .map(([key, value]) => 
                `"${key}":${approach2Fn(value)}`)
            .join(',');
        return `{${sObj}}`;
    } else {
        return JSON.stringify(data);
    }
}

Output:

[
    {"language":"JAVASCRIPT","category":"WEB DEVELOPMENT"},
    {"language":"PYTHON","category":"DATA SCIENCE"},
    {"language":"JAVA","category":"SOFTWARE DEVELOPMENT"}
]

Using a Custom Serialization Class

This approach involves defining a class with a toJSON method. The toJSON method allows you to control how instances of the class are serialized to JSON, giving you fine-grained control over the serialization process.

Example: In this example we defines a CustomSerializable class with a toJSON method for custom serialization. It creates an array of instances, converts it to JSON, and logs the string.

class CustomSerializable {
    constructor(language, category) {
        this.language = language;
        this.category = category;
    }

    // Custom toJSON method
    toJSON() {
        return {
            language: this.language.toUpperCase(),
            category: this.category.toUpperCase()
        };
    }
}
const data = [
    new CustomSerializable('JavaScript', 'Web Development'),
    new CustomSerializable('Python', 'Data Science'),
    new CustomSerializable('Java', 'Software Development')
];
const jsonString = JSON.stringify(data);

console.log(jsonString);

[{"language":"JAVASCRIPT","category":"WEB DEVELOPMENT"},{"language":"PYTHON","category":"DATA SCIENCE"},{"language":"JAVA","category":"SOFTWARE DEVELOPMENT"}]

G

gauravgandal

Follow

Improve