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
– Phil, Commented Mar 29, 2021 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
– tonyfat, Commented Mar 29, 2021 at 22:32
You need to know the specific key names somewhere in your processing — charlietfl
– charlietfl, Commented Mar 29, 2021 at 22:41

Phil · Accepted Answer · 2021-03-29 22:43:08Z

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, 2021 at 22:43

answered Mar 29, 2021 at 22:35

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

geoffrey Over a year ago

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 <MenuItem>. It is simple to read but it is solving a problem by increasing its surface area and making the design more rigid.

geoffrey · Accepted Answer · 2021-03-29 23:26:16Z

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

Collectives™ on Stack Overflow

JavaScript Map function to use generic keys within array of objects

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related