Mark Bran

asked on 4/20/2020

iterate array of objects then check a checkbox

I have 4 checkboxes with ids of... check1, check2, check3, check4
only one is true I need to iterate through them and when I find the one that's true then I need
that checkbox to be checked

One of them is true
here is a sample of the array

let todos = [
{
completed: true,
description: "some string",
},
{
completed: false,
description: "another string",
},
]

JavaScript

Last Comment

Michel Plungjan

8/22/2022 - Mon

ASKER CERTIFIED SOLUTION

Sam Jacobs

4/20/2020

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

Ryan Chong

4/20/2020

only one is true I need to iterate through them and when I find the one that's true then I need
that checkbox to be checked

Or a jquery version as follows:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"
        integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
</head>

<body>
    <input type="checkbox" id="OtherCheckBox" name="OtherCheckBox" value="Bike">
    <label for="OtherCheckBox"> Other Checkbox</label><br><br>

    <input type="checkbox" id="check1" name="check1" value="Bike">
    <label for="check1"> I have a bike</label><br>
    <input type="checkbox" id="check2" name="check2" value="Car">
    <label for="check2"> I have a car</label><br>
    <input type="checkbox" id="check3" name="check3" value="Boat">
    <label for="check3"> I have a boat</label><br>
    <input type="checkbox" id="check4" name="check4" value="House">
    <label for="check4"> I have a house</label><br><br>

    <input type="checkbox" id="OtherCheckBox2" name="OtherCheckBox2" value="OtherCheckBox2">
    <label for="OtherCheckBox"> Other Checkbox 2</label><br>

</body>

</html>

<script>
let todos = [{
        completed: false,
        description: "some string",
    },
    {
        completed: true,
        description: "another string 2",
    },
    {
        completed: false,
        description: "another string 3",
    },
    {
        completed: true,
        description: "another string 4",
    }
];

selectItem("check", todos);

function selectItem(chkboxName, data) {
    var idx = -1;
    var val = true;
    var filteredObj = data.find(function(item, i) {
        if (item.completed === val) {
            idx = i;
            console.log(idx);
            return i;
        }
    });
    
    if (idx > -1) {
        $("input:checkbox[id^='" + chkboxName + "']:eq(" + idx + ")").prop("checked", true);
    }

}
</script>

Open in new window

in this example, it will only select the first item that has completed = true.

Sam's example will select all items that has completed = true, but it depends on what you trying to archive.

Michel Plungjan

4/20/2020

Depending of need for IE support you can use findIndex:

https://jsfiddle.net/mplungjan/wjpemuog/

const idx = todos.findIndex(item => item.completed);
if (idx !== -1) document.getElementById("check"+(idx+1)).checked = true;

Open in new window

or just forEach:
https://jsfiddle.net/mplungjan/u72w6n3a/

let idx = -1;
todos.forEach(function(item,i) { if (item.completed) { idx = i; return false  }})
if (idx !== -1) document.getElementById("check"+(idx+1)).checked = true;

Open in new window

I thought perhaps you want to set ALL of them depending on true or false:

https://jsfiddle.net/mplungjan/1v70mc8p/2/

todos.forEach(function(item,i) { document.getElementById("check"+(i+1)).checked = item.completed })

Open in new window

Michel Plungjan

4/21/2020

Please note that this vanilla JS code

todos.forEach(function(item,i) { document.getElementById("check"+(i+1)).checked = item.completed })

Open in new window

is identical in functionality and compatibility to the more cumbersome

for (i = 0; i < todos.length; i++) {
  if (todos[i].completed==true) {
   document.getElementById("check"+(i+1)).checked=true;
  }
}

Open in new window

which additionally creates the variable i in global scope because of the lack of var or let

We can even reverse it by accessing checkboxes with id beginning with "check"
https://jsfiddle.net/mplungjan/nhfz45gd/

[...document.querySelectorAll("input[id^=check]")].forEach((chk,i) => chk.checked = todos[i].completed)

Open in new window

Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!

Walt Forbes

Mark Bran

4/21/2020

ASKER

Yes, I looked over again, I can see that ... if I understand it ... the item.completed simply itereates over all the completed items ... if they are true then it .checked = true;
Thank you for sharing ... I value your input. I always learn

Michel Plungjan

4/21/2020

The forEach iterates an array. In the last example we first have to make an array out of the HTML collection since it does not have a forEach method except in the latest browsers. In FX, Chrome and Edge Chromium, we could do forEach directly on the collection