使用JQUERY顯示JSON數據中的鍵和標簽

Question

下面是我的json數據，它存儲在Checklistdata.json中，我想使用jquery顯示鍵和標簽作為復選框，我的jquery只會顯示帶復選框的標簽。任何幫助，我將不勝感激。

[
    {
        "Beginning": [
            {
                "label": "Enter basic information"
            },
            {
                "label": "Enter name of Vendor "
            }
        ]
    }
]

下面是我的jquery !!

$.getJSON('Checklistdata.json', function (data) {
$.each(data, function (i, entity) {
                $('#Checklist').append($('<input />', { 'type': 'checkbox','label': entity.label, 'value': entity.is_correct })).append(entity.answer + '<br />');
            });

           $("#checkboxes").on('change', '[type=checkbox]', function () {
                console.log($(this).val());
            });
        });

Answer 1

這是一個可能會讓你入門的FIDDLE 。

數組將等同於您的json數據。 您需要設置樣式並更改格式以滿足您的需求。 它不是很優雅，但似乎有效。

JS

var myarray1 = ['y', 'n', 'y', 'y', 'y'];
var myarray2 = ['A', 'B', 'C', 'D', 'E'];

$('#mybutton').click(function(){

  $.each(myarray2, function(key, value){
             $('#holderdiv').append(value + "<input type='checkbox' />" + '<br />');
                                        });

    $('input[type=checkbox]').each(function(index){
            if(myarray1[index] == 'y')
                {
                    $(this).prop('checked', true); 
                }
                                          });
});

---

編輯：

好的，這是適用於您的陣列的新FIDDLE 。

使用jsonlint.com檢查json數組的有效性是個好主意。

新JS

var mydata = {
    "Beginning": [
        { "label": "Enter basic information", "id": 1 },
        { "label": "Enter name of Vendor ",  "id": 2 }
                  ]
               };

var firstvar = mydata.Beginning[0].id;

$('#mybutton').click(function(){

    $.each(mydata.Beginning, function(key, value){
             $('#holderdiv').append(mydata.Beginning[key].label + "<input type='checkbox' />" + '<br />');
                                        });

    $('input[type=checkbox]').each(function(index){
            if( mydata.Beginning[index].id == 1)
                {
                    $(this).prop('checked', true); 
                }
                                          });
});

Answer 2

你在迭代數據的方式是問題。 將data更改為：

var data= [
    {
        "Beginning": [
            { "label": "Enter basic information","id":1 }, 
            { "label": "Enter name of Vendor ","id":2 } 
        ]
    }
];

更改您的代碼行：

$.each(data, function(key, val) {

至

$.each(data[0].Beginning, function(key, val) {

那是因為data是一個對象數組。 進行此更改后，您將看到它更接近您想要實現的目標！ 這應該可以讓您進一步修改代碼以執行您希望的操作。

Answer 3

我有答案。 必須對JSON數據存儲進行一些更改，但它滿足我的要求。 以下是小提琴的答案。 http://jsfiddle.net/Suma_MD/fWLgD/2/

var data = getData(),
    $checklist = $('#checklist');

data.forEach(function (v) {
    var Description = v.Description;
    $checklist.append('<br>' + Description);
    var Array1=v.Checklist;
    var Array2;
    Array1.forEach(function(d){
      Array2 = d.label;
        $checklist.append('<br>' +"<input type='checkbox' />" + Array2 );
});
});



function getData() {
  return [
  {
      "Description": "Beginning1",
      "Checklist": [
          {
              "label": "Enter basic information",
          },
          {
              "label": "Enter basic information",
          },
          {
              "label": "Enter basic information",
          },
          {
              "label": "Enter basic information",
          }
      ]
  },    
  {
      "Description": "Beginning2",
      "Checklist": [
          {
              "label": "Enter basic ",
          },
          {
              "label": "Enter basic ",
          },
          {
              "label": "Enter basic ",
          },
          {
              "label": "Enter basic ",
          }
      ]
  }  
  ];
}

HTML： <div id="checklist"></div>