如何从 JSON 形成的数据库中进行动态复选框输入

Question

谁能帮我制作动态复选框？

所以，我有 JSON 个这样的数据

 [ {
  "categoryName" : "Category 1",
  "items" : [ {
    "value" : "value1",
    "label" : "label1"
  }, {
    "value" : "value2",
    "label" : "label2"
  } ]
}, {
  "categoryName" : "Category 2",
  "items" : [ {
    "value" : "value3",
    "label" : "label3"
  } ]
} ]

因为我知道复选框输入需要属性，比如值和标签，所以我需要做的就是用 JSON 中的数据填充属性，问题是如何根据 JSON.

中的数据自动生成此复选框

结果应该是这样的 THIS PICTURE

PS：抱歉我的英语不好

Answer 1

  const array = [ {
  "categoryName" : "Category 1",
  "items" : [ {
    "value" : "value1",
    "label" : "label1"
  }, {
    "value" : "value2",
    "label" : "label2"
  } ]
}, {
  "categoryName" : "Category 2",
  "items" : [ {
    "value" : "value3",
    "label" : "label3"
  } ]
} ]

let category = "";
let checkboxes = "";

array.forEach(el => {
category += `<h3>${el.categoryName}</h3>
`;
 if (el.items.length > 0) {
 el.items.forEach(v => {
 checkboxes += `<input type ="checkbox" value="${v.value}"> <label for 
 ="${v.value}">${v.label}</label>`;
  });
 } else {
checkboxes = ``;
}
});

未测试，但我希望它能为您提供解决问题的线索。

如何从 JSON 形成的数据库中进行动态复选框输入

How to make dynamic checkbox input from JSON formed database

javascript

arrays

json

nested-forms

reactjs