Link to home
Create AccountLog in
Avatar of Mark Bran
Mark Bran

asked on

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",
},
]
ASKER CERTIFIED SOLUTION
Avatar of Sam Jacobs
Sam Jacobs
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
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.
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




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 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

Avatar of Mark Bran
Mark Bran

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
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