如何显示嵌套在数组中的对象的匹配描述？

Question

I have a function, whose purpose is to display specific description of a particular object that is nested within an array. The idea is that once the function ( findSettings() ) receives a particular array( systemSettings ) and some key( tab12 ) that is in the objects, it should run through the switch statement and provide its matching description.

In other words, if the function's argument is 'tab12', then it should return the description, 'Description for tab12'.

I have tried to find a matching object using the find method, and that works well, although if I try to run the switch statement, it returns an error: 'Obejct is possibly undefined'.

const systemSettings = [
  {key: 'tab1', value: 'Main Tab'}, 
  {key: 'tab12', value: 'Tab 12'}, 
  {key: 'tab13', value: 'Tab 13'}, 
  {key: 'tab4', value: 'Tab 4'}
]

type sampObj = {
  key: string;
  value: string;
}

let info: string = '';

function findSetting(arr: sampObj[], settingKey: string) {

  const selectedObjs = arr.find(obj => obj.key === settingKey);

  switch(selectedObjs.key) {
    case 'tab1':
      info += 'Description for tab1';
      break;
    case 'tab12':
      info += 'Description for tab12';
      break;
    case 'tab13':
      info += 'Description for tab13';
      break;
    case 'tab4':
      info += 'Description for tab4';
      break;
    default: 
      info += 'No description available'
  }

}

findSetting(systemSettings, 'tab12')```

Any assistance would be highly appreciated.
Thanks.

Answer 1

const selectedObjs = arr.find(obj => obj.key === settingKey); could return undefined if an object with the specified key is not in the array.

You can check to see if the object is not undefined before executing your switch statement:

if(selectedObjs) {
   switch(selectedObjs.key) {
       case 'tab1':
          info += 'Description for tab1';
          break;
        case 'tab12':
          info += 'Description for tab12';
          break;
        case 'tab13':
          info += 'Description for tab13';
          break;
        case 'tab4':
          info += 'Description for tab4';
          break;
        default: 
          info += 'No description available'
  }
}
else {
   // Handle invalid settingKey case
}

Answer 2

I think simpler solution would be to use something like Map for storing your descriptions against the keys. Also, there is handy Utility Type in TypeScript called Record for type safety. Then you simply don't have to provide your array in findSetting function

  systemSettingsDescriptions: Record<string, string> = {
    tab1: "Description for tab1",
    tab2: "Description for tab2",
    tab3: "Description for tab3"
  };

  systemSettings: sampObj [] = [
    { key: "tab1", value: "Main Tab" },
    { key: "tab12", value: "Tab 12" },
    { key: "tab13", value: "Tab 13" },
    { key: "tab4", value: "Tab 4" }
  ];

  function findSetting(settingKey: string): string {
    this.systemSettingsDescriptions[settingKey] || "No description available";
  }