Array.map( ) only works on First Array but not on the Second. Can someone please explain why it doesn't work and provide proper solution

Question

I have two arrays, each array gets mapped over and if the array doesn't match with "apiSuggestion" the element gets black background-color with red text. This works:

let sentenceOne = ["somthing", "life", "nothing"];
let sentenceTwo = ["nummber", "seven", everythng"];

let apiSuggestion = ["something", "life", "nothing", "number", "seven", "everything"];

let matchMakerOne = sentenceOne.map(function(word,index){
   if( word !== apiSuggestion[index]){
        return `
               <span style="background-color:black; color:red">
                     ${word}
               </span>
       } else {
               return word
              }
          })
document.getElementById("sentenceOne").innerHTML = machMakerOne.join(' ')
//in the HTML i see "somthing" highlighted in black background-color with red text, as it doesnt match to api suggesstion

This doesn't work even though its the same logic, where am I making a mistake?

let matchMakerTwo = sentenceTwo.map(function(word,index){
   if( word !== apiSuggestion[index]){
        return `
               <span style="background-color:black; color:red">
                     ${word}
               </span>
       } else {
               return word
              }
          })
document.getElementById("sentenceTwo").innerHTML = machMakerTwo.join(' ')
// "nummber", "seven", everythng" all get black background and red text
// nummber and everythng should get black background and red text

I tried to "concat" sentenceOne and sentenceTwo, it only catches the spelling mistakes from first array but not the second. How can I highlight the spelling mistakes in both these arrays and render it in the HTML? Any help is appreciated. Thank you in advance. i created JSFiddle

Answer 1

@Thakur is correct - in both cases, you're only checking the first three elements of the apiSuggestion array.

Replace

if (word !== apiSuggestion[index]) {...}

with

if (apiSuggestion.indexOf(word) === -1) {...}

Array.indexOf(arg) returns -1 if arg is NOT an element of the target array.

Reference: MDN: Array.prototype.indexOf()

Answer 2

The code is working correctly. You are looping every item in the array in returning colored text if the value of the item does not match the item in the same index in apiSuggestion.

sentence one:

sentenceOne[0] (somthing) | apiSuggestion[0] (something) - NOT
sentenceOne[1] (life) | apiSuggestion[1] (life) - MATCH
sentenceOne[2] (nothing) | apiSuggestion[2] (nothing) - MATCH

sentence two:

sentenceTwo[0] (nummber) | apiSuggestion[0] (something) - NOT
sentenceTwo[1] (seven) | apiSuggestion[1] (life) - NOT
sentenceTwo[2] (everythng) | apiSuggestion[2] (nothing) - NOT

I believe what you what to achieve is to return a colored text if the current item in the iteration is not in the apiSuggestion array. You can achieve that using the includes method. Your function should be:

let matchMakerTwo = sentenceTwo.map(function(word) {
    if (!apiSuggestion.includes(word)) {
        return `
            <span style="background-color:black; color:red">
                ${word}
            </span>
        `
    } else {
        return word
    }
})

PS: You can embed a code snippet to your question. This way your question becomes cleaner and with a working model.