Getting Undefined while fetching particular key value from get method using Lodash

Question

I have following array of data.

const filterToolTips = [{
    remember_tip: 'some remember tip data.'
  },
  {
    background_tip: 'some background tip data'
  },
  {
    remember_on: 'some remember on tip data'
  },
  {
    remember_off: 'some remember off data.'
  },
  {
    background_on: 'some background on data '
  }
];

I am trying to get each key text for different use case. So, I am using lodash, But, It is showing undefined.

const toolText = get(filterToolTips,'remember_tip');
console.log('toolTipText', toolTipText); // 'toolTipText', undefined

Even I tried find too.

Any suggestions?

Answer 1

Use _.find() with _.has() to find an object with the requested key, and then use _.get() to take the value:

const filterToolTips = [{"remember_tip":"some remember tip data."},{"background_tip":"some background tip data"},{"remember_on":"some remember on tip data"},{"remember_off":"some remember off data."},{"background_on":"some background on data "}];

const key  = 'remember_tip';

const toolText = _.get(
  _.find(filterToolTips, o => _.has(o, key)),
  key
);

console.log(toolText);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>

However, this is a really weird data structure, and you should transform it (or ask the server guys to send you something more usable). This solution converts the data structure to a Map, and then gets the value:

const filterToolTips = [{"remember_tip":"some remember tip data."},{"background_tip":"some background tip data"},{"remember_on":"some remember on tip data"},{"remember_off":"some remember off data."},{"background_on":"some background on data "}];

const tipsMap = new Map(Object.entries(Object.assign({}, ...filterToolTips)));

const key  = 'remember_tip';

const toolText = tipsMap.get(key);

console.log(toolText);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.js"></script>