javascript - 如何在 jQuery 中解析 JSON 数组，可视化页面上的每个元素，并在每个要分割的元素上提供一个选项？

Question

我想解析在线服务的 JSON 响应并将其可视化在页面上。我想可视化作为响应获得的 JSON 数组的每个元素，但每个元素都应该通过一个选项来可视化，以便选择并添加到我可以操作的数组中。我如何使用 jQuery 和 Javascript 来做到这一点？

Answer 1

答案的完整演示:https://jsfiddle.net/hg9r9xa5/3/

您首先需要根据 JSON 中获取的数据创建一个带有复选框的表单。

jsonData = '{ "one": {"name": "foo"},"two": {"name": "bar"} }';
parsedData = JSON.parse(jsonData);
list = '<form id="arrayCreator">';
$.each(parsedData, function(index, element) {
  list = list + '<input type="checkbox" name="value" checked="checked" value="' + element.name + '">' + element.name + '<br>';
});
list = list + '<input type="submit" value="Create Array"></form>';
$('body').append(list);

然后您必须阻止默认表单操作，而是检查选择了哪些选项，并将这些值传递给数组。

var arrayFromJson = [];
$('#arrayCreator').submit(function(e) {
  e.preventDefault();
  inputs = $("#arrayCreator input[type='checkbox']");
  for (x = 0; x < inputs.length; x++) {
    if ($(inputs[x]).is(":checked")) {
        arrayFromJson.push(inputs[x].value);
    }
  }
});

然后你就可以对该数组做任何你想做的事情。