JavaScript Map function to use generic keys within array of objects

Question

I have the following array of objects:

[
    {
        "job_id": 1,
        "job_name": "Engineer"
    },
    {
        "job_id": 2,
        "job_name": "Scientist"
    },
    {
        "job_id": 3,
        "job_name": "Teacher"
    }
]

where the following code is used to construct a Material-UI Select - options here is the above array of objects:

{options.map(option => {
          return (
            <MenuItem key={option.job_id} value={option.job_id}>
              {option.job_name}
            </MenuItem>
          )
})}

My questions is, in order to not tie it down to actual key names of option.job_id and option.job_name as I am looking at using different datasets with different key names, but always following this key value pair format - can the map function be changed to make it more generic as to not worry about key names but still return the data for the Select dropdown, i.e.:

{options.map(option => {
              return (
                <MenuItem key={option.generic_id} value={option.generic_id}>
                  {option.generic_name}
                </MenuItem>
              )
    })}

I guess I am asking whether it's possible to access the object keys via the map function without needing to know job_id and job_name ?

It's not clear what you're asking. Do you want to alter the array to change the object keys or are you asking about something else? — Phil, Mar 29 '21 at 22:30
I guess I am asking whether it's possible to access the object keys via the map function without needing to know `job_id` and `job_name`. Hope this makes sense? — tonyfat, Mar 29 '21 at 22:32
You need to know the specific key names somewhere in your processing — charlietfl, Mar 29 '21 at 22:41

Phil · Accepted Answer · 2021-03-29T22:43:08.487

2

If you want to be able to use dynamic object keys, it sounds like you want some kind of helper function that can take in the array and the relevant keys and return your menu items

For example

const menuBuilder = (options, keyProp, labelProp) => options.map(option => (
  <MenuItem key={option[keyProp]} value={option[keyProp]}>
    {option[labelProp]}
  </MenuItem>
))

edited Mar 29 '21 at 22:43

answered Mar 29 '21 at 22:35

Phil

157,677
23
242
245

The downside I see with this approach is that there must exist a place in the codebase which both knows about `job_id` and about ``. It is simple to read but it is solving a problem by increasing its surface area and making the design more rigid. – geoffrey Mar 30 '21 at 07:45

score 2 · Answer 2 · answered Mar 29 '21 at 23:26

If you can't make the keys more generic upstream, you can do one of two things

Normalising the keys before they hit your component on the call site

import { pipe, mapKeys } from 'utils';

const normaliseOption = mapKeys(key =>
      key.match(/_id$/) ? 'id'
    : key.match(/_name$/) ? 'name'
    : key
);

options.map(pipe(normaliseOption, option =>
    <MenuItem key={option.id} value={option.id}>
        {option.name}
    </MenuItem>
));

// utils
export const pipe = (...fns) => fns.reduce(
    (f, g) => x => g(f(x))
);

export const mapKeys = f => pipe(
    Object.entries,
    x => x.map(([k, v]) => [f(k), v]),
    Object.fromEntries
);

1.bis) Somewhere upstream, where you know for sure you are dealing with jobs, you can do the above without the regexp.

Relying on a common interface to dispatch to the correct info

options.map(option =>
    <MenuItem key={option.getId()} value={option.getId()}>
        {option.getName()}
    </MenuItem>
);

// somewhere you know you are dealing with jobs
import JobOption from './JobOption';
const options = jobs.map(JobOption.of);

export default class JobOption {
    constructor({job_id, job_name}) {
        this.id = job_id;
        this.name = job_name;
    }
    static of (descriptor) { return new JobOption(descriptor); }
    getId () { return this.id; }
    getName () { return this.name; }
}

JavaScript Map function to use generic keys within array of objects

2 Answers2