Filter 2 arrays return based on matching inner values javascript

Question

I have 2 arrays bodyparts & equipment.
Array objects have been put into dropdown menus.
I am trying to filter results based on object values
eg. If i select 'chest' from bodyparts array and 'barbell' from equipment array i only want results with a matching values from 'chest' and 'barbell' to appear in the console.

This is what the array object looks like
{bodyPart: 'neck', equipment: 'body weight', id: '1403', name: 'neck side stretch', …}

const dataDiv = document.getElementById("data")
const apiURL = 'https://exercisedb.p.rapidapi.com/exercises/bodyPart/%7Bchest%7D'

let mainList = []
let bodypartsList = []
let equipmentList = []


async function getApiURL(endpoint, value) {
    console.log(`https://exercisedb.p.rapidapi.com/exercises/${endpoint}/${value}`);
    const response = await fetch(`https://exercisedb.p.rapidapi.com/exercises/${endpoint}/${value}`, {
        "method": "GET",
        "headers": {
            "x-rapidapi-host": "exercisedb.p.rapidapi.com",
            "x-rapidapi-key": "myApiKey"
        }
    })
    const data = await response.json();
    if (endpoint == "bodypart") {
        bodypartsList = data
    } else {
        equipmentList = data
    }
    mergeLists()
}

function mergeLists() {
    mainList = bodypartsList.concat(equipmentList);
    displayData(mainList)
}


//bodypart code
const bodyparts = ["Body Parts", "back", "cardio", "chest", "lower arms", "lower legs", "neck", "shoulders", "upper arms", "upper legs", "waist"]
const equipment = ["Equipment", "assisted", "band", "barbell", "body weight", "cable", "dumbbell", "ez barbell", "hammer", "kettlebell", "leverage machine", "medicine ball", "resistance band", "roller", "rope", "smith machine", "tire", "trap bar", "weighted"]


const exercises = document.getElementById("exercises");


window.addEventListener("load", function () {
    createDropdown("bodypart", bodyparts);
})
window.addEventListener("load", function () {
    createDropdown("equipment", equipment);
})

// const select = document.createElement("select"); //---create the select element
// const option = document.createElement("option"); //---create options for select

function createDropdown(name, items) {
    const select = document.createElement("select"); //---create the select element
    select.className = "selectMenu"
    select.name = name
    select.id = name
    for (let i = 0; i < items.length; i++) { //---as long as 'i' is less than the number of items increase by 1
        const item = items[i]; //---declaring 'i' as items
        const option = document.createElement("option"); //---create options for select
        option.setAttribute("value", item); //---places item value into options
        option.innerHTML = item; //---change content of options to items
        select.appendChild(option); //---append options to select

    }
    exercises.appendChild(select); //---append data to options


    select.addEventListener("change", function () {
        const item = select.value;
        dataDiv.innerHTML = ''; //<------Clears previous results from page
        // console.log(item);
        getApiURL(name, item);
    })
}


function displayData(data) {
    // console.log(data);
    let d1 = document.getElementById("equipment")
    let d2 = document.getElementById("bodypart")

    console.log(d2.value);

    if (d2.value && d1.value !== -1 ){
    const result = data.filter(word => {
        return (word.name.indexOf(d1.value))
    });
   
    console.log(result);
    
    result.forEach(element => {
        const div = document.createElement("div");
        const p = document.createElement("p");
        // const img = document.createElement("img");
        // img.className = "appGifs"
        p.innerHTML = element.name
        // img.src = element.gifUrl
        div.appendChild(p)
        // div.appendChild(img)
        div.className = "card"
        dataDiv.appendChild(div)
    
    });
}
}

HTML


  
    Logo goes here

It is currently showing all merged results, i think it is adding filtered results to the mainList array and not removing unwanted results.
I really cannot find what i have done wrong and appreciate any help

Thanks

user_10117433 · Answer

So what I have understood from If I select 'chest' from bodyparts array and 'barbell' from equipment array I only want results with matching values from 'chest' and 'barbell' to appear in the console. this line is, If you select chest from dropdown, you want to show all the data whose name matches with the selected value.

You are doing like this:

    const result = data.filter(word => {
        return (word.name.indexOf(d1.value))
    });

indexOf() method returns the position of the first occurrence of a specified value in a string. indexOf() method returns -1 if the value is not found.

It will never return you the result that you are expecting. So instead of doing that, You can try something like this:

const result = data.filter(word => word.name.includes(d2.value));

this will return all the values that match with the selected value of D2 dropdown. For d1, you need to do the same.

Update

change your display function with this

function displayData(data) {
    debugger;
    // console.log(data);
    let d1 = document.getElementById("equipment");
    let d2 = document.getElementById("bodypart");

    console.log(d2.value);

    let value1;
    let value2;

    //get filtered value for d2
    if (d2.value){
        value2 = data.filter(word => word.name.includes(d2.value));
    }
    ////get filtered value for d1
    if (d1.value){
        value1 = data.filter(word => word.name.includes(d1.value));
    }

    //merge both the value into one using spread operator(... this is called spread operator in JS)
    let result = [
        ...value1,
        ...value2
   ];

   //loop over the final result
    if(result.length > 0){
        console.log(result);
        debugger;
        result.forEach(element => {
            debugger;
            const div = document.createElement("div");
            const p = document.createElement("p");
            // const img = document.createElement("img");
            // img.className = "appGifs"
            p.innerHTML = element.name
            // img.src = element.gifUrl
            div.appendChild(p)
            // div.appendChild(img)
            div.className = "card"
            dataDiv.appendChild(div)
        
        });
    }
}

user_1370984 · Answer

You are mixing strings and indexes. I'm also assuming you don't want to filter with 0 index like the other posted answer does.

let result = data;
if (d1.selectedIndex > 0) {
 const selected = d1.value;
 result = result.filter(({equipment}) => equipment.includes(selected));
}

if (d2.selectedIndex > 0) {
 const selected = d2.value;
 result = result.filter(({bodyPart}) => bodyPart.includes(selected));
}

user_17426754 · Answer

I think the problem is in the if condition within your function displayData

if (d2.value && d1.value !== -1 ){
const result = data.filter(word => {
    return (word.name.indexOf(d1.value))
});

If there is no match between d1.value and word.name, the condition returns -1, not 0, which means even if there is no match, it also returns true (-1 means true, only 0 means false).

So you could simply change this condition to

return word.name.indexOf(d1.value) !== -1

user_13936498 · Answer

in js not-primitives like arrays and objects are Pass by reference, so whenever you want to compare two arrays,you have to change the data types. you have to change objects and array to string, then do the compare. use JSON.stringify for doing that. the code below is just a sample:

const arr1 = []
const arr2 = [] 
console.log(arr1 === arr2) //false

console.log(JSON.stringify(arr1) === JSON.stringify(arr2)) //true

Filter 2 arrays return based on matching inner values javascript

4 Answers