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);
    }
  }
});

然后你就可以用那个数组做任何你想做的事。

如何在jQuery中解析JSON数组，可视化页面上的每个元素，并在每个要选择的元素上有一个选项？

1 个答案: