Revision history [back]

To create a dynamic checkbox using API data, you can follow these steps:

1. Fetch the API data using a JavaScript method like fetch() or axios.
2. Parse the response data to extract the required information, such as the checkbox label and value.
3. Create a container element to hold the checkboxes, such as a <div> or <ul> element.
4. Loop through the API data and create a checkbox element for each item.
5. Set the label and value for each checkbox based on the parsed API data.
6. Append each checkbox element to the container element.
7. Add event listeners to the checkboxes as needed.

Here is an example code snippet that demonstrates how to create dynamic checkboxes using API data:

const apiUrl = 'https://example-api.com/data';

async function createCheckboxes() {
  const response = await fetch(apiUrl);
  const data = await response.json();

  const container = document.createElement('div');

  data.forEach(item => {
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.id = item.id;
    checkbox.name = item.name;
    checkbox.value = item.value;

    const label = document.createElement('label');
    label.setAttribute('for', item.id);
    label.textContent = item.name;

    container.appendChild(checkbox);
    container.appendChild(label);
  });

  document.body.appendChild(container);
}

createCheckboxes();