Check first letter of array and set property on an object if exists

Question

I have an array of site tenants, this looks something like

['foo','bar','boo','baz']

I also have an object which controls the state of filter.

This filter is used to control which tenants are visible, this looks something like

[
  { text: 'ALL', disbaled: false },
  { text: 'A', disbaled: true },
  { text: 'B', disbaled: true },
  { text: 'C', disbaled: true },
  { text: 'D', disbaled: true },
  { text: 'E', disbaled: true },
  { text: 'F', disbaled: true },
  { text: 'G', disbaled: true },
  { text: 'H', disbaled: true },
  { text: 'I', disbaled: true },
  { text: 'J', disbaled: true },
  { text: 'K', disbaled: true },
  { text: 'L', disbaled: true },
  { text: 'M', disbaled: true },
  { text: 'N', disbaled: true },
  { text: 'O', disbaled: true },
  { text: 'P', disbaled: true },
  { text: 'Q', disbaled: true },
  { text: 'R', disbaled: true },
  { text: 'S', disbaled: true },
  { text: 'T', disbaled: true },
  { text: 'U', disbaled: true },
  { text: 'V', disbaled: true },
  { text: 'W', disbaled: true },
  { text: 'X', disbaled: true },
  { text: 'Y', disbaled: true },
  { text: 'Z', disbaled: true },
];

What I would like to do is loop over this tenant list and for each string I find, set the corresponding starting letter's disabled flag to false in my letter object

I have a filter elsewhere that is allowing me to control which tenants are displyed, like so...

const byFirstLetter = letter => {
  if (letter === 'ALL') return () => true;

  const rgx = new RegExp(`^${letter}`);
  return tenant => rgx.test(tenant);
};

tenants.filter(byFirstLetter(selector)).map(column => (
  <div className="column is-half">
    <ul>{column.map(client => <li key={client}>{client}</li>)}</ul>
  </div>
))}

I am struiggling to work out how I can do this though, I was thinking of looping over, creating a new object then using object.assign to replace the updated values, but am not sure if this is correct and cannot make it work.

Answer 1

There's some ambiguity in your question (especially around All ), but I think this is the right direction for you.

const tenants = ['foo','bar','boo','baz'];

let letters = [
  { text: 'ALL', disabled: false },
  { text: 'A', disabled: true },
  { text: 'B', disabled: true },
  { text: 'C', disabled: true },
  { text: 'D', disabled: true },
  { text: 'E', disabled: true },
  { text: 'F', disabled: true },
  { text: 'G', disabled: true },
  { text: 'H', disabled: true },
  { text: 'I', disabled: true },
  { text: 'J', disabled: true },
  { text: 'K', disabled: true },
  { text: 'L', disabled: true },
  { text: 'M', disabled: true },
  { text: 'N', disabled: true },
  { text: 'O', disabled: true },
  { text: 'P', disabled: true },
  { text: 'Q', disabled: true },
  { text: 'R', disabled: true },
  { text: 'S', disabled: true },
  { text: 'T', disabled: true },
  { text: 'U', disabled: true },
  { text: 'V', disabled: true },
  { text: 'W', disabled: true },
  { text: 'X', disabled: true },
  { text: 'Y', disabled: true },
  { text: 'Z', disabled: true },
];

const disableLetters = (all) => {
  if (all) {
    // ... I'm not sure what your intentions for the "All" index is supposed to be
    // but handle it here.
    return;
  }

  tenants.forEach(tenant => {
    const firstLetter = tenant.length ? tentant[0] : '';

    letters = letters.map(letter => {
      letter.disabled = letter.text.toLowerCase() !== firstLetter.toLowerCase();

      return letter;
    });
  });
}

// Usage:

disableLetters();

Answer 2

Maybe this is what you are trying to do.

Given an array of names :

var tenant = ['ambr','raul','marcio','gustavo','sandra']

Set to false the disabled property in the letter_arr array where the text is equal to the starting char of the name.

This can be done with the following function:

 tenant.map(a=>letter_arr.filter(b=>b.text.toLowerCase()==a[0].toLowerCase()).map(b=>b.disabled=false))

Explanation

tenant is your array of names

map is used to loop over the tenant array

Then we filter the letter_arr by the first char of the tenant.

Then, for each result, we map again and set the disabled property to false.

 var letter_arr = [ { text: 'ALL', disbaled: false }, { text: 'A', disbaled: true }, { text: 'B', disbaled: true }, { text: 'C', disbaled: true }, { text: 'D', disbaled: true }, { text: 'E', disbaled: true }, { text: 'F', disbaled: true }, { text: 'G', disbaled: true }, { text: 'H', disbaled: true }, { text: 'I', disbaled: true }, { text: 'J', disbaled: true }, { text: 'K', disbaled: true }, { text: 'L', disbaled: true }, { text: 'M', disbaled: true }, { text: 'N', disbaled: true }, { text: 'O', disbaled: true }, { text: 'P', disbaled: true }, { text: 'Q', disbaled: true }, { text: 'R', disbaled: true }, { text: 'S', disbaled: true }, { text: 'T', disbaled: true }, { text: 'U', disbaled: true }, { text: 'V', disbaled: true }, { text: 'W', disbaled: true }, { text: 'X', disbaled: true }, { text: 'Y', disbaled: true }, { text: 'Z', disbaled: true }, ]; var tenant = ['ambr','raul','marcio','gustavo','sandra'] tenant.map(a=>letter_arr.filter(b=>b.text.toLowerCase()==a[0].toLowerCase()).map(b=>b.disbaled=false)) console.log(letter_arr)