How to compare two arrays - one with letters and one with words

user_19105538 0
Viewed 74

I have two arrays, one with alphabetical letters and another array with words. I need to find all the letters that dont have a word in other array which starts from that letter. For example:

arr1 = [apple, bee, mom, dog] arr2 = [a,b,c,d]

I need a function which finds letter c from arr2, because it does not have any word starting from this letter.

My app has buttons with letters, and each letter has some content starting from that letter. I want to highlight the letters that have no content in there.

This is what I tried to do, and it works with === operator, but doesnt work with !=.

    for(let i = 0; i < searchItemsTitle.length; i++) {
        for(let e = 0; e < letterButtons.length; e++) {
            if(searchItemsTitle[i].innerText.charAt(0) === letterButtons[e].innerText.charAt(0)) {
                letterButtons[e].classList.add("a-z-grey-letter");
                console.log(letterButtons[e].innerText)
            }
        }
    }
javascript
3 Answers

you can use :

  • array.filter to get only element that have a first letter present in letterButtons array
  • use array.foreach to add class for all these elements

const letterButtons = ['a', 'b', 'c', 'd'];
const searchItemsTitle = [...document.querySelectorAll('.title')];

const filteredItem = searchItemsTitle.filter(title => letterButtons.some(button => button.charAt(0) === title.innerText.charAt(0)));

filteredItem.forEach(item => item.classList.add("a-z-grey-letter"));
.a-z-grey-letter:first-letter {
  color: grey;
}
<div class="title">apple</div>
<div class="title">bee</div>
<div class="title">mom</div>
<div class="title">dog</div>

to apply the grey color just to the mom word just invert the condition in the filter function (with ! before some function)

const letterButtons = ['a', 'b', 'c', 'd'];
const searchItemsTitle = [...document.querySelectorAll('.title')];

const filteredItem = searchItemsTitle.filter(title => !letterButtons.some(button => button.charAt(0) === title.innerText.charAt(0)));

filteredItem.forEach(item => item.classList.add("a-z-grey-letter"));
.a-z-grey-letter:first-letter {
  color: grey;
}
<div class="title">apple</div>
<div class="title">bee</div>
<div class="title">mom</div>
<div class="title">dog</div>

user_30547220

To get the cases in the letter array that are not first characters in the word array:

We can filter() arr2 against arr1 items' first character (using map) not existing, with "not" includes(), in arr2.

const arr1 = ['apple', 'bee', 'mom', 'dog']
const arr2 = ['a','b','c','d']

const mutants = arr2.filter(a2 => !arr1.map(a1 => a1.charAt(0)).includes(a2)) // returns ['c']

To get the cases of the first characters in the word array that are not in the letter array:

We can filter() arr1 against arr2 items not existing, with "not" includes(), in arr1 items' first character.

const arr1 = ['apple', 'bee', 'mom', 'dog']
const arr2 = ['a','b','c','d']

const mutants = arr1.filter(a1 => !arr2.includes(a1.charAt(0))) // returns ['mom']

Below is the result, of the first scenario above, inspired by @jeremy-denis's answer.

const letterButtons = [...document.querySelectorAll('.letterButton')]
const searchItemsTitle = ["apple", "bee", "mom", "dog"]

const filteredItem = letterButtons
                        .filter(button => !searchItemsTitle
                                             .map(searchItem => searchItem.charAt(0))
                                             .includes(button.textContent.toLowerCase())
                        )
filteredItem.forEach(item => item.classList.add("a-z-grey-letter"))
.a-z-grey-letter:first-letter {
  color: lightgrey;
}
<div class="letterButton">A</div>
<div class="letterButton">B</div>
<div class="letterButton">C</div>
<div class="letterButton">D</div>

user_41118620

I think .some may work for your issue. It will return either True or False based on if it can find the letter.

user_198152290
Related