I have here a nested array:
const roster = [["Ryu","RyuNormal"], ["Ryu as Ken","RyuKen"], ["Ryu as Akuma","RyuAkuma"], ["Chun-Li","ChunLi"],["Zangief"]]
And a for-loop that will produce options for a dropdown menu:
for ([char, link] of roster) {
options += `\n <OPTION class="show" data-toggle="${link ?? char}">${char}</OPTION>`;
}
Each bracket in the nested array consists of the character's name before the comma, and a toggle link ref after the comma. If the bracket has only one entry and not two (see Zangief), it is to be assumed the character's name doubles as a toggle link, hence the double question marks.
Suppose you are building a chart that compares special move functions between two characters. If you were on Chun-Li or Zangief's respective web pages, the dropdown menu would gladly show you Ryu's moves in addition to his Ken and Akuma forms (for those not in the know, in the first Marvel vs. Capcom game, Ryu had the ability to switch styles), so their OPTION tags would be included here. However, if you were on Ryu's page, the only OPTION tags you would be able to see are Chun-Li's and Zangief's, which is the intended result.
console.log(result) // [["Chun-Li","ChunLi"],["Zangief"]] if on Ryu page
console.log(result) // [["Ryu","RyuNormal"], ["Ryu as Ken","RyuKen"], ["Ryu as Akuma","RyuAkuma"], ["Zangief"]] if on Chun-Li page
I have tried the findIndex and filter functions, but neither of them worked. When I tried the filter function, the console log kept bringing up the entire array no matter if I used the !== or the includes() parameter. The findIndex function kept giving me a -1 (no match) whenever I tried looking up all entries that had the word "Ryu." As this was a nested array, using the brackets in my field of search somewhat alleviated the situation, but there were some mishaps, like removing Chun-Li and Zangief because they were unique results but only removing one instance of Ryu when it should have removed all three instances.
Codes used:
var index = roster.filter(x => x !== "Ryu");
// Filter matching string
var index = roster.filter(x => x !== roster.includes("Ryu"));
// Filter with includes
var index = roster.findIndex(x => x == "Ryu");
if (index >= 0)
data.splice(index,);
// Find index and splice
How do I revise the code so that the filter and/or findIndex function properly finds all instances of a word in the first half of any bracketed array? Array splicing is optional.
Something like the following with selectedHero containing the name of the current hero should do the job:
const rx=new RegExp(selectedHero,"i"),
options=roster.filter(([k])=>!rx.test(k))
You can try it out in the below snippet:
const roster = [["Ryu","RyuNormal"], ["Ryu as Ken","RyuKen"], ["Ryu as Akuma","RyuAkuma"], ["Chun-Li","ChunLi"],["Zangief"]];
const [inp,sel]=["input","select"].map(s=>document.querySelector(s));
inp.addEventListener("input",()=>{
const rx=new RegExp(inp.value,"i");
sel.innerHTML=roster.filter(([k])=>!rx.test(k))
.map(([k,v])=>`<OPTION class="show" data-toggle="${v ?? k}">${k}</OPTION>`).join("\n");
});<input type="text" placeholder="current hero ..."><br>
<select></select>