How to get particular key values in using Lodash

Question

I have array of objects like following.

[{
  "key": "remember_tip",
  "description": "some remember description"
}, {
  "key": "logout_tip",
  "description": "some logout description"
}, {
  "key": "notremember_tip",
  "description": "some not remember description"
},{
  "key": "backgroundOff",
  "description": "some backgroundOff description"
},
{
   "key": "backgroundOn",
      "description": "some backgroundOn description"
    },
 ..];

I have methods like following.

someMethod = (variable) => {

  if (variable === remember) {
    this.rememberHandler()
  } else if (variable === logout) {
    this.logoutHandler()
  } else if (variable === notremember) {
    this.notrememberHandler()
  }else if (variable === backgroundoff) {
    this.backgroundoffHandler()
  }

}

rememberHandler = () => {
  //showpopup with remember_tip description
}

logoutHandler = () => {
  //showpopup with logout_tip description
}

notrememberHandler = () => {
  //showpopup with notremember_tip description
}
    backgroundoffHandler = () => {
  //showpopup with backgroundOff description
}

Answer 1

You can use the current structure to get the description values. Use _.find() to get the object, with the requested key, and get the value with _.get():

const { flow, partialRight: pr, find, get } = _

const getFrom = arr => flow(
  key => find(arr, { key }),
  pr(get, 'description'),
)

const tips = [{
  "key": "remember_tip",
  "description": "some remember description"
}, {
  "key": "logout_tip",
  "description": "some logout description"
}, {
  "key": "notremember_tip",
  "description": "some not remember description"
}]

const getFromTips = getFrom(tips)

const result = getFromTips('remember_tip')

console.log(result)

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

However, this is a lot of code for something quite simple. Create a Map of key to description from the array. When the show method is called, it gets the description from the Map, and displays the popup:

const tips = [{
    "key": "remember_tip",
    "description": "some remember description"
  }, {
    "key": "logout_tip",
    "description": "some logout description"
  }, {
    "key": "notremember_tip",
    "description": "some not remember description"
  }, {
    "key": "backgroundOff",
    "description": "some backgroundOff description"
  },
  {
    "key": "backgroundOn",
    "description": "some backgroundOn description"
  }
];

const tipsMap = new Map(tips.map(({ key, description }) => [key, description]))

const showpopup = console.log // demo show popup

const show = popUp => {
  const description = tipsMap.get(popUp);

  if (description) showpopup(description)
}

show('logout_tip')

show('backgroundOff')