Получить JSON и вывести в флажки
В настоящее время я получаю такие данные JSON из сценария PowerShell:
[{"Name":"grp_SIR_RW"},{"Name":"grp_SIR_R"},{"Name":"grp_SPIE_RW"},{"Name":"grp_GOR_R"}]
Мне нужно получить каждое имя в этих выходных данных и вставить их в флажки HTML, чтобы мои пользователи могли выбрать одно или несколько из них, а отображение должно быть хорошо организовано, поскольку у меня может быть около 30 групп для отображения.
Конечно, вы можете называть это так, я в основном хочу извлечь имена групп и поместить их во входное значение.
Итак, что вы уже написали?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам нужно динамически создать флажок из 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>Я предполагаю, что вы спрашиваете, как отображать данные JSON в HTML, которые уже получены из источника данных. В этом случае попробуйте следующее.
В HTML создайте заполнитель для флажка
<div id = "checkboxContainer">
<!-- Place to create the checkboxes -->
</div>
затем данные должны быть динамически вставлены в заполнитель HTML, поэтому попробуйте следующее в JS, предполагая, что вы уже получили данные.
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);
});
}
Затем эта функция должна быть запущена, поэтому, предполагая, что у вас будет функция для извлечения данных, как только данные будут получены, вызовите функцию и передайте данные в функцию.
await generateCheckboxes(jsonData);
Надеюсь это поможет :)
почему ты используешь async/await для этого? это вообще не имеет смысла
Пользователь сам решает, как ему это потребуется, если ему нужно, он может использовать это, это не имеет значения.
Да, вы правы, но я спросил, ПОЧЕМУ вы используете асинхронное ожидание ЭТОГО кода. Какую функцию он выполняет?
Для этого вы можете использовать JavaScript для анализа данных JSON и динамического создания флажков HTML для каждого имени группы. Вот базовый пример того, как вы можете это сделать:
<!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>
Этот код динамически создает флажки для каждого имени группы в данных JSON. Каждый флажок сопровождается меткой, отображающей имя группы. Вы можете настроить внешний вид и макет в соответствии с вашими требованиями.
наклеить их"??? не лучше ли вам написать код для их извлечения и создания флажков?