使用 JQUERY 从 JSON 数据中显示键和标签

Question

下面是我存储在 Checklistdata.json 中的 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

您围绕数据进行迭代的方式是问题所在。将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 2

这里有一个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 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>