Article Categories

Selected Reading

Formatting JavaScript Object to new Array

Javascript Web Development Object Oriented Programming

In JavaScript, you can format objects into arrays using various methods like destructuring, Object.keys(), Object.values(), or custom formatting based on your needs. This is useful for data transformation and display purposes.

Example: Formatting Object Properties to Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Format Object to Array</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }
        .result {
            font-size: 16px;
            font-weight: 500;
            color: rebeccapurple;
            margin: 20px 0;
        }
        button {
            padding: 10px 20px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Formatting JavaScript Object to Array</h1>
    <button onclick="formatSchoolData()">Format School Data</button>
    <div class="result" id="result"></div>

    <script>
        const school = {
            name: "St Marks",
            address: "Delhi",
            students: [
                {
                    firstName: "Rohan",
                    lastName: "Sharma",
                    age: 14,
                },
                {
                    firstName: "Mohit",
                    lastName: "Singh",
                    age: 18,
                },
                {
                    firstName: "Mike",
                    lastName: "Shaw",
                    age: 17,
                },
                {
                    firstName: "Roy",
                    lastName: "Mehta",
                    age: 16,
                },
            ],
        };

        function formatSchoolData() {
            let schoolArr = [];
            let { name, address } = school;
            
            // Format each student into a string
            for (let student of school.students) {
                schoolArr.push(
                    `${student.firstName} ${student.lastName} ${student.age}`
                );
            }
            
            // Display the formatted array
            const resultDiv = document.getElementById("result");
            resultDiv.innerHTML = "<h3>Formatted Student Data:</h3>";
            schoolArr.forEach((item) => {
                resultDiv.innerHTML += item + "<br>";
            });
        }
    </script>
</body>
</html>

Output

Before clicking the button, only the heading and button are visible. After clicking "Format School Data", the formatted student information displays:

Formatted Student Data:
Rohan Sharma 14
Mohit Singh 18
Mike Shaw 17
Roy Mehta 16

Different Formatting Methods

Here are common ways to format objects into arrays:

<!DOCTYPE html>
<html>
<head>
    <title>Object to Array Methods</title>
</head>
<body>
    <div id="output"></div>
    <script>
        const person = {
            name: "John",
            age: 30,
            city: "New York"
        };

        // Method 1: Object.keys() - Get property names
        const keys = Object.keys(person);
        console.log("Keys:", keys);

        // Method 2: Object.values() - Get property values
        const values = Object.values(person);
        console.log("Values:", values);

        // Method 3: Object.entries() - Get key-value pairs
        const entries = Object.entries(person);
        console.log("Entries:", entries);

        // Method 4: Custom formatting
        const customFormat = Object.entries(person).map(([key, value]) => 
            `${key}: ${value}`
        );
        
        // Display results
        document.getElementById("output").innerHTML = `
            <h3>Keys:</h3> ${keys.join(", ")}<br>
            <h3>Values:</h3> ${values.join(", ")}<br>
            <h3>Custom Format:</h3> ${customFormat.join("<br>")}
        `;
    </script>
</body>
</html>

Common Use Cases

Data Display: Converting objects to arrays for table rows or list items
Form Processing: Extracting form data into processable arrays
API Responses: Reformatting server data for frontend display
Data Export: Converting objects to CSV-like formats

Comparison of Methods

Method	Returns	Use Case
`Object.keys()`	Array of property names	When you need property names only
`Object.values()`	Array of property values	When you need values only
`Object.entries()`	Array of [key, value] pairs	When you need both keys and values
Custom formatting	Custom formatted strings	When you need specific formatting

Conclusion

JavaScript provides multiple ways to format objects into arrays. Use Object.keys(), Object.values(), or Object.entries() for standard conversions, or create custom formatting functions for specific display requirements.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

568 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next