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

Please explain with a little more detail: "i want to display the key and the labels as check boxes using jquery" — krisk
– krisk, Commented Feb 15, 2014 at 8:53
@RaviH I am attaching my FIDDLE here : jsfiddle.net/Suma_MD/fWLgD/1 but if i change my json data to :var data= [ { "Beginning": [ { "label": "Enter basic information" }, { "label": "Enter name of Vendor " } ] } ] nothinh works. — Suma Mutalikdesai
– Suma Mutalikdesai, Commented Feb 17, 2014 at 6:48
my above data is wrong here is the correct one : @RaviH I am attaching my FIDDLE here : jsfiddle.net/Suma_MD/fWLgD/1 but if i change my json data to :var data= [ { "Beginning": [ { "label": "Enter basic information","id":1 }, { "label": "Enter name of Vendor " ,"id":2} ] } ] nothing works. — Suma Mutalikdesai
– Suma Mutalikdesai, Commented Feb 17, 2014 at 7:00

RaviH · Accepted Answer · 2014-02-17 10:16:14Z

1

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.

answered Feb 17, 2014 at 10:16

RaviH

3,5942 gold badges17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

TimSPQR · Accepted Answer · 2014-02-17 15:30:51Z

1

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

edited Feb 17, 2014 at 15:30

answered Feb 15, 2014 at 12:22

TimSPQR

3,0043 gold badges22 silver badges29 bronze badges

2 Comments

Suma Mutalikdesai Over a year ago

I am attaching my FIDDLE here : jsfiddle.net/Suma_MD/fWLgD/1 but if i change my json data to :var data= [ { "Beginning": [ { "label": "Enter basic information","id":1 }, { "label": "Enter name of Vendor ","id":2 } ] } ] nothinh works.

Suma Mutalikdesai Over a year ago

No you code still does not gets the key now. But that's i got the answer.Thank you for the help

Suma Mutalikdesai · Accepted Answer · 2014-02-18 10:43:29Z

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>

Collectives™ on Stack Overflow

Displaying key and label from JSON data using JQUERY

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related