如何解析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);
    }
  }
});

然后，您可以使用该数组执行任何操作。