How to group an array within React Native

Question

I have an array of objects called "directory" which include a list of people and their job. The problem is that a person can cover more than 1 role and I'd like to group the "job" under the same "id" during rendering. This is my array:

"directory": 
[
    {            
      "id": 37,
      "job": "Electrician",
      "name": "Alan"
    },
    {
      "id": 32,
      "job": "Writer",
      "name": "Mark"
    },
    {
      "id": 37,
      "job": "DIY",
      "name": "Alan"
    },
    {
      "id": 134,
      "job": "Director",
      "name": "Philip"
    },
    {
      "id": 37,
      "job": "Plumber",
      "name": "Alan"
    },
    {
      "id": 85,
      "job": "Teacher",
      "name": "Oliver"
    },
]

and I'd like to get a new array to display as:

Alan: Electrician, Plumber, DIY
Mark: Writer
Philip: Director,
Oliver: Teacher

I'm not sure whether I should use nested .map or reduce.

Any help appreciated.

Answer 1

You can use reduce() in JS to fix your problem

let directory = [
    {
        "id": 37,
        "job": "Electrician",
        "name": "Alan"
    },
    {
        "id": 32,
        "job": "Writer",
        "name": "Mark"
    },
    {
        "id": 37,
        "job": "DIY",
        "name": "Alan"
    },
    {
        "id": 134,
        "job": "Director",
        "name": "Philip"
    },
    {
        "id": 37,
        "job": "Plumber",
        "name": "Alan"
    },
    {
        "id": 85,
        "job": "Teacher",
        "name": "Oliver"
    },
]

let newDirectory = Object.values(directory.reduce((acc, item) => {
    if (!acc[item.name]) acc[item.name] = {
        name: item.name,
        job: []
    };
    acc[item.name].job.push(item.job);
    return acc;
}, {}))

console.log(newDirectory)

Then you can use SectionList in React-Native to display data according to your requirement or you can try something like below,

import React, { Component } from 'react';
import { Text, View } from 'react-native';

const newDirectory = [
    { name: 'Alan', job: ['Electrician', 'DIY', 'Plumber'] },
    { name: 'Mark', job: ['Writer'] },
    { name: 'Philip', job: ['Director'] },
    { name: 'Oliver', job: ['Teacher'] }
]

export default class App extends Component {
    render() {
        return (
            <View style={{ flex: 1, marginTop: 50 }}>
                {
                    newDirectory.map(item => (
                        <Text>{item.name}: {
                            item.job.map(job => (
                                <Text>{`${job}, `}</Text>
                            ))
                        }</Text>
                    ))
                }
            </View>
        );
    }
}

Hope this helps you. Feel free for doubts.