Question 359134 in Html Question posted in
Some basic documentation can be found here.

Html – Retrieve JSON and output to checkboxes

I’m currently retrieving this kind of JSON data from a PowerShell script:

[{"Name":"grp_SIR_RW"},{"Name":"grp_SIR_R"},{"Name":"grp_SPIE_RW"},{"Name":"grp_GOR_R"}]

I need to retrieve each names in this output and paste them into HTML checkboxes so my users can select one or many of them and the display needs to be well organized since I can have like 30 groups to display.

Tags:

3

Answers


  1. 0

    You need to dynamically create the checkbox from the json

    const data = [{
    "Name": "grp_SIR_RW"
  },
  {
    "Name": "grp_SIR_R"
  },
  {
    "Name": "grp_SPIE_RW"
  },
  {
    "Name": "grp_GOR_R"
  }
]
// creating a fragment to hold the dynamically created checkbox
// and it will be used to project the elements to the main 
//container
const temp = document.createElement('template')

data.forEach((item) => {
  const label = document.createElement('label');
  label.setAttribute('for', item.Name);
  label.textContent = item.Name;
  const check = document.createElement('input');
  check.setAttribute('type', 'checkbox')
  check.id = item.Name;
  // appending the created elements to the fragment
  temp.content.appendChild(label);
  temp.content.appendChild(check);
});


const clone2 = temp.content.cloneNode(true);
document.getElementById('checkBoxContainer').appendChild(clone2)
    <div id="checkBoxContainer">

</div>
    Login or Signup to reply.
  2. 0

    I assume that you are asking on how to display the JSON data in HTML which is already retrieved from the data source, in such case, try the following

    In HTML create a place holder for check box

    <div id="checkboxContainer">
    <!-- Place to create the checkboxes -->
</div>

    next the data has to dynamically inserted into the HTML place holder, so try the following in JS, assuming that you have already retrieved the data.

    const jsonData = [{ "Name": "grp_SIR_RW" }, { "Name": "grp_SIR_R" }, { "Name": "grp_SPIE_RW" }, { "Name": "grp_GOR_R" }];

const generateCheckboxes = async (data) => {
    var container = document.getElementById('checkboxContainer');

    data.forEach(function (item) {
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'group';
        checkbox.value = item.Name;

        var label = document.createElement('label');
        label.appendChild(checkbox);
        label.appendChild(document.createTextNode(item.Name));

        container.appendChild(label);
    });
}

    Next this function has to be triggered, so assuming that you would be having a function to fetch the data, once the data is fetched, call the function and pass the data to the function.

    await generateCheckboxes(jsonData);

    Hope this helps 🙂

    Login or Signup to reply.
  3. 0

    To achieve this, you can use JavaScript to parse the JSON data and dynamically create HTML checkboxes for each group name. Here’s a basic example of how you can do it:

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Group Selection</title>
</head>
<body>

<h2>Select Groups</h2>

<div id="checkboxes-container">
  <!-- Checkboxes will be dynamically added here -->
</div>

<script>
  // JSON data retrieved from PowerShell script
  var jsonData = [{"Name":"grp_SIR_RW"},{"Name":"grp_SIR_R"},{"Name":"grp_SPIE_RW"},{"Name":"grp_GOR_R"}];

  // Get the container where checkboxes will be added
  var checkboxesContainer = document.getElementById("checkboxes-container");

  // Loop through the JSON data and create checkboxes
  jsonData.forEach(function(group) {
    // Create a checkbox element
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.name = "group";
    checkbox.value = group.Name;
    
    // Create a label for the checkbox
    var label = document.createElement("label");
    label.appendChild(document.createTextNode(group.Name));
    
    // Add checkbox and label to the container
    checkboxesContainer.appendChild(checkbox);
    checkboxesContainer.appendChild(label);
    checkboxesContainer.appendChild(document.createElement("br")); // Add line break for spacing
  });
</script>

</body>
</html>

    This code dynamically creates checkboxes for each group name in the JSON data. Each checkbox is accompanied by a label displaying the group name. You can customize the appearance and layout further according to your requirements.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search