# Update property object using coded component

**URL:** <https://community.appfarm.io/t/update-property-object-using-coded-component/1395>\
**Category:** Ask the community\
**Tags:** actions\
**Created:** [September 20, 2024, 12:42pm UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395 "2024-09-20T12:42:28Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_sivert](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/_sivert/32/1484_2.png) [@\_sivert](https://community.appfarm.io/u/_sivert)\
**Post date:** [September 20, 2024, 12:42pm UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395/1 "2024-09-20T12:42:29Z")

</div>

Hello!

I am using a coded component to display the values of the properties (called filters in this case) of an object. By clicking a switch I want to toggle between true/false values. However, as .set() can not be used to this I need to connect an action and pass the value in question as a parameter. How can I know which property corresponds to the toggleSwitch in question, as it will be one if the many iterated properties.

 ![image](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/1/1993a87ac52011d596b9956deb7684ab4c7359b1.png)

---

<div class="post-metadata">

**Author:** ![ErikAKSkallevold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/erikakskallevold/32/1378_2.png) [@ErikAKSkallevold](https://community.appfarm.io/u/ErikAKSkallevold)\
**Post date:** [September 23, 2024, 7:38am UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395/2 "2024-09-23T07:38:19Z")

</div>

Hi, just a thought,

You’re creating multiple `<input>` with the same class `.toggle_switch` and giving each an `onClick` event handler in the `forEach`.

Would it not be easier to also give each `<input>` an unique ID by using the `index` property on `forEach`?

```js
filters.forEach((filterName, index) => {
  filterDiv.innerHTML += `
    <input type="checkbox" class="toggle-switch" id="checkbox${index}" onClick="myFunction('checkbox${index}')">
  `;
});

```

After you have created all the HTML, you can have a function that gets the value of the checkbox in question:

```auto
function myFunction(checkboxId) {
  const the_checkbox = appfarm.elements.getElementById(checkboxId);
  const the_value = the_checkbox.checked ? true : false;
  appfarm.actions.example({ id: checkboxId, setValue: !the_value })
    .then(() => {
      the_checkbox.checked = !the_value; // Fix the checked state after the action
    })
    .catch(err => console.log(err));

```

With this method, you have a way to know which checkbox has been triggered.  
Hopefully this helps 😄

// Erik

---

<div class="post-metadata">

**Author:** ![\_sivert](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/_sivert/32/1484_2.png) [@\_sivert](https://community.appfarm.io/u/_sivert)\
**Post date:** [September 24, 2024, 8:16am UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395/3 "2024-09-24T08:16:50Z")

</div>

Thanks! I’ll have a look at implementing this:)

---

<div class="post-metadata">

**Author:** ![\_sivert](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/_sivert/32/1484_2.png) [@\_sivert](https://community.appfarm.io/u/_sivert)\
**Post date:** [September 24, 2024, 8:50am UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395/5 "2024-09-24T08:50:12Z")

</div>

Due to permission issues I modified your suggestion somewhat, and created an event listener instead.

```auto
const container = document.getElementById('filter-container');
container.innerHTML = ''; // Clear any existing content

Object.keys(filters).forEach((filterName, index) => {

    const isActive = filters[filterName];

    // Create the filter item container
    const filterDiv = document.createElement('div');
    filterDiv.className = 'filter-item';

    // Create inner HTML with the toggle switch
    filterDiv.innerHTML = `
        <div class="toggle-item">
            <span class="material-icons MuiIcon-root jss364 mdi mdi-menu" aria-hidden="true" style="font-size: 18px;"></span>
            <span class="item-label">${filterName}</span>
            <input type="checkbox" class="toggle-switch" id="checkbox${index}" ${isActive ? 'checked' : ''}>
        </div>
    `;
    // Append the filter to the container
    container.appendChild(filterDiv);

    const checkbox = filterDiv.querySelector(`#checkbox${index}`);
    checkbox.addEventListener('click', () => myFunction(`checkbox${index}`));
});

```

The function is pretty much the same

```auto
function myFunction(checkboxId) {
      const the_checkbox = appfarm.element.getElementById(checkboxId);
      const the_value = the_checkbox.checked ? true : false;
      appfarm.actions.changeValue({ filterIndex: checkboxId, value: !the_value })
          .then(() => {
              the_checkbox.checked = !the_value; // Fix the checked state after the action
          })
          .catch(err => console.log(err));
  } 

```

However, I am getting this error:  
Property ‘getElementById’ does not exist on type ‘HTMLElement’.(2339)

I have tried using .document with various javascript workarounds, but I cannot get it to work. What am I missing?

---

<div class="post-metadata">

**Author:** ![ErikAKSkallevold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/erikakskallevold/32/1378_2.png) [@ErikAKSkallevold](https://community.appfarm.io/u/ErikAKSkallevold)\
**Post date:** [September 25, 2024, 5:06am UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395/6 "2024-09-25T05:06:23Z")

</div>

Strange,

Maybe querySelector would work better?  
So `appfarm.element.querySelector(#id);` ?

// Erik

---

<div class="post-metadata">

**Author:** ![\_sivert](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/_sivert/32/1484_2.png) [@\_sivert](https://community.appfarm.io/u/_sivert)\
**Post date:** [October 21, 2024, 9:51am UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395/7 "2024-10-21T09:51:04Z")

</div>

Hi! Sorry for the late response, I have been away from this issue for a while. Thanks for your help, querySelector worked fine:)

---

<div class="post-metadata">

**Author:** ![ErikAKSkallevold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/erikakskallevold/32/1378_2.png) [@ErikAKSkallevold](https://community.appfarm.io/u/ErikAKSkallevold)\
**Post date:** [October 21, 2024, 10:15am UTC](https://community.appfarm.io/t/update-property-object-using-coded-component/1395/8 "2024-10-21T10:15:16Z")

</div>

Great to hear that it worked out 🙂

// Erik