JQuery - Create input with attributes from JSON

Question

I am trying to create an input with the id and value attributes set from a JSON. I have an ajax call which gets the JSON and the data returned is just fine, and for each object from the JSON I want to create a button with an ID and a value from the JSON.

The Ajax call:

$.ajax({
            type: "GET",
            url: '@Url.Action("GetSubjects", "CommAPI")',
            dataType: "json",
            success: function (data) {
                $.each(data, function (index, element) {
                    $('#subjects').append('<input type ="button" id=" ' + element.Id + ' " value=' + element.Title + '  class=k-button  />');
                });
            },

        });

The objects from the JSON however have 5 additional properties in them, not just Id and Title. When placing the debugger at the line with the input creation, the Id and Title are undefined.

How may I create these inputs from this JSON?

Returned JSON copied from the Console:

14:41:57.928 {"Data":[{"Id":1,"IdCSite":1,"IdDEvent":1,"Title":"Test","CaseName":null,"Description":"dsadasdasda","InsertedDate":"/Date(-62135596800000)/","SelectedUsers":null,"ViewSelectedUsers":null,"IsCurrentUserIncluded":false},{"Id":2,"IdCSite":1,"IdDEvent":1,"Title":"Test2","CaseName":null,"Description":"sdadasdas","InsertedDate":"/Date(-62135596800000)/","SelectedUsers":null,"ViewSelectedUsers":null,"IsCurrentUserIncluded":false},{"Id":3,"IdCSite":1,"IdDEvent":1,"Title":"test 3","CaseName":null,"Description":"sdadasdasda","InsertedDate":"/Date(-62135596800000)/","SelectedUsers":null,"ViewSelectedUsers":null,"IsCurrentUserIncluded":false}],"Total":3,"AggregateResults":null,"Errors":null}1 messageboard:128:25

try console.log(JSON.stringify(data)) after success. and give data what are you getting — Parth Trivedi
– Parth Trivedi, Commented Nov 27, 2015 at 12:51
$.each(data.Data, update to this and it does not have any key named Id — Jai
– Jai, Commented Nov 27, 2015 at 12:58

Satpal · Accepted Answer · 2015-11-27 12:59:18Z

5

As per your JSON, you need to use Data property of data object. thus change $.each(data, to $.each(data.Data,

 $.each(data.Data, function (index, element) {
     $('#subjects').append('<input type ="button" id="' + element.Id + '"  value="' + element.Title + '"  class=k-button  />');
 });

answered Nov 27, 2015 at 12:59

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

Bogdan U Over a year ago

Worked like a charm! Thanks Satpal!

GameTag · Accepted Answer · 2015-11-27 12:58:41Z

0

You can use directly jQuery properties to make that :

$.ajax({
  type: "GET",
  url: '@Url.Action("GetSubjects", "CommAPI")',
  dataType: "json",
  success: function (data) {
    $.each(data, function (index, element) {
      $input = $('<input'>).prop('id', element.Id).prop('title', element.title).addClass('k'); 
      $('#subjects').append($input);
    });
});

Becareful how do you name your variable, for example 'Id' is a key word of Javascript. You should name like idu if it's a user for example.

Enjoy :)

answered Nov 27, 2015 at 12:58

GameTag

3791 silver badge12 bronze badges

Collectives™ on Stack Overflow

JQuery - Create input with attributes from JSON

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related