filter from the array of objects data based upon values i get from checkboxes

Question

I am trying to filter some records coming from my api data, i am trying to use filter but i am not sure how should i do for multipoe items.

Here is my code the api response i have and what happens when i do a checkbox

my APi data

{
    "requestId": "",
    "totalRecords": 132,
    "status": "SUCCESS",
    "items": [
        {
            "Id": 3489,
            "Status":"Awaiting Funds",
            "amountPaid": {
                "unit": "CAD",
                "value": 10
            },
            "Name": "John Doe"
        },
        {
            "Id": 3508
            "Status":"Awaiting Funds",
            "amountPaid": {
                "unit": "CAD",
                "value": 10
            },
            "Name": "John Doe"
        },
        {
            "Id": 3503,
            "Status":"Awaiting Funds",
            "amountPaid": {
                "unit": "CAD",
                "value": 25
            },
            "Name": "John Sinth"
        }
    ]
}

and in my checkbnox i am passing two checkboxes values which are full object like 3508,3503 but now sure how to do

Here is my code as to what i did but i am not getting filetered records

const parsedData = JSON.parse(JSON.stringify(this.apiData));
                    if (this.multipleSelection.length > 0) {
                        const data = parsedData.filter(function (el)
                        {
                            return el.Id = 3489 and 3503
                        })
                    } else {
                        const data = parsedData;
                    }

If you do: console.log(typeof this.apiData) what do you get? — Roko C. Buljan
– Roko C. Buljan, Commented Jan 18, 2023 at 1:09
3489 and 3503 is invalid JS. Please refer to some documentation. — Roko C. Buljan
– Roko C. Buljan, Commented Jan 18, 2023 at 1:11
i know its invalid, but i want to know how do i get the only two objects when i am using filter instead of all 3 — Nocus
– Nocus, Commented Jan 18, 2023 at 1:11

Roko C. Buljan · Accepted Answer · 2023-01-18 01:43:09Z

1

Use Array.prototype.filter() in combination with Array.prototype.includes()

const data = {
    "requestId": "",
    "totalRecords": 132,
    "status": "SUCCESS",
    "items": [
        {
            "Id": 3489,
            "Status":"Awaiting Funds",
            "amountPaid": {"unit": "CAD","value": 10},
            "Name": "John Doe"
        },{
            "Id": 3508,
            "Status":"Awaiting Funds",
            "amountPaid": {"unit": "CAD","value": 10},
            "Name": "John Doe"
        },{
            "Id": 3503,
            "Status":"Awaiting Funds",
            "amountPaid": {"unit": "CAD","value": 25},
            "Name": "John Sinth"
        }
    ]
};

const ids = [3503, 3508];
const parsedData = data.items.filter((item) => ids.includes(item.Id));

console.log(parsedData)

if the above is still not clear, here's an example that uses checkboxes:

const data = {
    "requestId": "",
    "totalRecords": 132,
    "status": "SUCCESS",
    "items": [
        {
            "Id": 111,
            "Status":"Awaiting Funds",
            "amountPaid": {"unit": "CAD","value": 10},
            "Name": "John Doe"
        },{
            "Id": 222,
            "Status":"Awaiting Funds",
            "amountPaid": {"unit": "CAD","value": 10},
            "Name": "John Doe"
        },{
            "Id": 333,
            "Status":"Awaiting Funds",
            "amountPaid": {"unit": "CAD","value": 25},
            "Name": "John Sinth"
        }
    ]
};


const filterByIds = (ids) => data.items.filter((item) => ids.includes(+item.Id));

const elsIdInputs = document.querySelectorAll("[name='id']");


elsIdInputs.forEach((elId) => {
  elId.addEventListener("input", () => {
    const ids = [...elsIdInputs].filter(el => el.checked).map(el => +el.value);
    console.log(ids)
    if (!ids.length) return; // Exit. (none is checked)
    
    // Else... do something here
    console.clear();
    console.log(filterByIds(ids));
  });
});

<label><input type="checkbox" name="id" value="111"> 111</label>
<label><input type="checkbox" name="id" value="222"> 222</label>
<label><input type="checkbox" name="id" value="333"> 333</label>

edited Jan 18, 2023 at 1:43

answered Jan 18, 2023 at 1:19

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

10 Comments

Nocus Over a year ago

but i have an object, no specify ids with me, so i cannot directly add ids

Roko C. Buljan Over a year ago

@Nocus could you share an example of how that "object" looks like?

Nocus Over a year ago

when i check the chbox, the value is going as array of object as:

[{             "Id": 3503,             "Status":"Awaiting Funds",             "amountPaid": {                 "unit": "CAD",                 "value": 25             },             "Name": "John Sinth"         }]

Nocus Over a year ago

if i select 2 checkboxes, it pass 2 objects inside an array

Nocus Over a year ago

i shared with you, how it looks like, if i select one checkbox, it passes the whole row as array of objects and one of such key is id and has a value of 3503

|

Collectives™ on Stack Overflow

filter from the array of objects data based upon values i get from checkboxes

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related