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

然后，您可以使用該數組執行任何操作。