Displaying key and label from JSON data using JQUERY

Question

Below is my json data which is stored in Checklistdata.json, i want to display the key and the labels as check boxes using jquery,my jquery will only display the label with check box.Any help, i will be grateful.

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

Below is my 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

I have got my answer. have to made some changes to JSON data storing, but it satisfies my requirement. So below is the answer with fiddle. 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>

Answer 2

Here is a FIDDLE that will probably get you started.

The arrays would be the equivalent of your json data. You'd need to style it and change the format to suit your needs. It's not very elegant, but seems to work.

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

---

EDIT:

Ok, here's the new FIDDLE that works with your array.

It's a good idea to use jsonlint.com to check the validity of your json array.

New 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

The way you are iterating around the data is the problem. After you change data to:

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

Change your line of code:

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

to

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

That is because data is an array of object. After you make this change you will see it moving a step closer to what you want to achieve! That should give you idea to modify your code further to do what you want it to do.