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",
},
]
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Depending of need for IE support you can use findIndex:
https://jsfiddle.net/mplungjan/wjpemuog/
https://jsfiddle.net/mplungjan/u72w6n3a/
I thought perhaps you want to set ALL of them depending on true or false:
https://jsfiddle.net/mplungjan/1v70mc8p/2/
https://jsfiddle.net/mplungjan/wjpemuog/
const idx = todos.findIndex(item => item.completed);
if (idx !== -1) document.getElementById("check"+(idx+1)).checked = true;
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;
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 })
Please note that this vanilla JS code
We can even reverse it by accessing checkboxes with id beginning with "check"
https://jsfiddle.net/mplungjan/nhfz45gd/
todos.forEach(function(item,i) { document.getElementById("check"+(i+1)).checked = item.completed })
is identical in functionality and compatibility to the more cumbersomefor (i = 0; i < todos.length; i++) {
if (todos[i].completed==true) {
document.getElementById("check"+(i+1)).checked=true;
}
}
which additionally creates the variable i in global scope because of the lack of var or letWe 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)
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
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
Or a jquery version as follows:
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.