Filter multiple values with multiple attributes js

Question

I want to filter the multiple attributes with multiple values

'arr' is a list of all products and f_... is the attribute like color or type.

'namet' is the chosen attribute from the user.

'keyt' is the values of each attribute like red, yellow and green.

 let arr = [
        { "id": 523, "f_105": ["992","996"],  "f_104": ["985"], "f_106":["1000"] },
        { "id": 524, "f_105": ["993","996"],  "f_104": ["984"], "f_106":["1001"] }
    ]

these arrays which user chose for searching

I can get the attrubites like this

var namet = ['f_106', 'f_106', 'f_105', 'f_105', 'f_104' ];
var keyt  = ['1000' , '1001', '993', '996', '985'];

OR

var chooenKey = ['f_106', 'f_105', 'f_104']
var chosenAttr = {
    "f_106": ["1000", "1001"],
    "f_105": ["993", "996"],
    "f_104": ["985"],
}

OR

var chosenAttr =
[
    {"f_106": ["1000", "1001"]},
    {"f_105": ["993", "996"]},
    {"f_104": ["985"]}
]

I want a method to loop to get result like variable 'filtered'

var filtered = d => 
        (d.f_106.indexOf("1000") > -1 || d.f_106.indexOf("1001") > -1) && 
        (d.f_105.indexOf("993")  > -1  || d.f_105.indexOf("996") > -1)  &&
        (d.f_104.indexOf("985")  > -1)

then put it here

const f = arr.filter(filtered);

You can also give another type to filter the product with multiple attributes.

What's the specific issue? Recall that you can access d.f_106 either that way, or d["f_106"]. — Dave Newton
– Dave Newton, Commented Jun 10, 2021 at 19:09
I want a method or loop to generate a code like in variable filtered. If I have {"f_106": ["1000", "1001"]} in chosenAttr so the varible will be like var filtered = d => (d.f_106.indexOf("1000") > -1 || d.f_106.indexOf("1001") > -1) — youssef maia
– youssef maia, Commented Jun 10, 2021 at 19:13
So you'd want to iterate chosenAttr (each item called attr in this comment), and for each attr use the object key to see which property of d you're checking, and see if any of d[attrKey] values exist in attrValue, which could be done a variety of ways. You. might be over-thinking this :) — Dave Newton
– Dave Newton, Commented Jun 10, 2021 at 19:27
yeah maybe so how I can filter the product like in arr list. — youssef maia
– youssef maia, Commented Jun 10, 2021 at 19:44

Serhan Yavçin · Accepted Answer · 2021-06-10 19:57:54Z

1

If you examine the example I sent, I believe it will solve your problem.

let arr = [
    { "id": 523, "f_105": ["992", "996"], "f_104": ["985"], "f_106": ["1000"] },
    { "id": 524, "f_105": ["993", "996"], "f_104": ["984"], "f_106": ["1001"] }
]


var chosenAttr =
    [
        { "f_106": ["1000", "1001"] },
        { "f_105": ["992"] },
        { "f_104": ["985"] }
    ]



function filterArr() {
    var arrCopy = arr;

    for (i = 0; i < chosenAttr.length; i++) {
        for (var key in chosenAttr[i]) {
            arrCopy = arrCopy.filter(function (item) {
                var is_match = false;

                for (var idx in chosenAttr[i][key]) {
                    let val = chosenAttr[i][key][idx];

                    if (item[key].indexOf(val) > -1) {
                        is_match = true;
                    }
                }
                return is_match;
            });
        }
    }

    return arrCopy;
}

var filterData = filterArr();
$('#response').html(JSON.stringify(filterData));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre>
<code id="response">
  
</code>
</pre>

answered Jun 10, 2021 at 19:57

Serhan Yavçin

891 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Serhan Yavçin Over a year ago

I'm so glad I could help :)

Collectives™ on Stack Overflow

Filter multiple values with multiple attributes js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related