React Group Array Of Objects By Key

Grouping an array of objects by a key is a common task in JavaScript or React JS, especially when dealing with data structures. Various methods, including the built-in Array.prototype.reduce, can accomplish this. In this article, we'll delve into grouping an array of objects by a key using React. React offers a declarative and component-based approach to rendering data, making it easier to manipulate and display grouped arrays

written

reviewed

updated

How can I use ReactJS to create a grouped array of objects based on a specific key?

React Js Make group array of object by key:In ReactJS, you can create a grouped array of objects by a specific key using the reduce method. First, initialize an empty object as the accumulator.

Then, iterate over the array of objects and check if the key value already exists in the accumulator. If it does, push the current object into the existing key's array.

Otherwise, create a new key in the accumulator with an array containing the current object. Finally, use Object.values() to convert the grouped object back into an array.

This process allows you to group objects based on a specific key, resulting in an array of objects grouped by that key

React Js Make group array of object by key Example

<script type="text/babel">
        const data = [
            { id: 1, name: 'John', category: 'A' },
            { id: 2, name: 'Jane', category: 'B' },
            { id: 3, name: 'Bob', category: 'A' },
            { id: 4, name: 'Alice', category: 'C' },
            { id: 5, name: 'Mike', category: 'B' },
        ]

        function App() {
            const groupedData = data.reduce((groups, item) => {
                const { category } = item;
                if (!groups[category]) {
                    groups[category] = [];
                }
                groups[category].push(item);
                return groups;
            }, {});

            return (
                <div className='container'>
                    <h2>React Js group array of object by key(category)</h2>
                    {Object.entries(groupedData).map(([category, items]) => (
                        <div key={category}>
                            <h3>{category}</h3>
                            <ul>
                                {items.map((item) => (
                                    <li key={item.id}>{item.name}</li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </div>
            );
        }
        ReactDOM.render(<App />, document.getElementById("app"));
    </script>

Run

Output of React Js Make group array of object by key

How to Group Array of Objects by Key in Javascript?

JavaScript is used to group an array of objects by a certain key or value. For example, you may want to group an array of products by their category or an array of students by their grade. There are different ways to achieve this in JavaScript, such as using loops, reduce, or map functions. In this example, we will explore some of the methods to group an array of objects by key or value in JavaScript.

Javascript Group Array of Objects by Key

<body>
     <h3>Javascript Group Array of Objects by Key</h3>
     <p>Click the button to show grouped data</p>
    <button onclick="groupData()">Group Data</button>
    <div id="result"></div>

    <script>
          const data = [
                { id: 1, name: 'Apple', category: 'fruit' },
                { id: 2, name: 'Tomato', category: 'vegetable' },
                { id: 3, name: 'Doll', category: 'Toy' },
                { id: 4, name: 'Banana', category: 'fruit' },
                { id: 5, name: 'Carrot', category: 'vegetable' },
                { id: 6, name: 'Teddy Bear', category: 'Toy' },
                { id: 7, name: 'Orange', category: 'fruit' },
                { id: 8, name: 'Broccoli', category: 'vegetable' },
                { id: 9, name: 'Action Figure', category: 'Toy' },
                // Add more items as needed
            ];
        function groupData() {
             const groupedData = data.reduce((result, item) => {
                (result[item.category] = result[item.category] || []).push(item);
                return result;
            }, {});

            // Display the grouped data on the webpage
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '<h2>Grouped Data:</h2>';
            for (const category in groupedData) {
                resultDiv.innerHTML += `<p>${category}: ${JSON.stringify(groupedData[category])}</p>`;
            }
        }
    </script>

</body>

Run

Output of Js Group Array of Objects by Key

Pasted Image

Releated Tutorials

👉Vue Js Group Array of Object by Key

React JS Tutorial