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, ie:

{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 ?

Answer 1

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

1. 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.

2. 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; }
}

Answer 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>
))