JQuery - 使用来自 JSON 的属性创建输入答案

【问题标题】：JQuery - Create input with attributes from JSONJQuery - 使用来自 JSON 的属性创建输入
【发布时间】：2016-03-01 16:20:18
【问题描述】：

我正在尝试使用从 JSON 设置的 id 和 value 属性创建一个输入。我有一个 ajax 调用，它获取 JSON 并且返回的数据很好，对于 JSON 中的每个对象，我想创建一个带有 ID 和 JSON 值的按钮。

Ajax 调用：

$.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  />');
                });
            },

        });

然而，来自 JSON 的对象还有 5 个附加属性，而不仅仅是 Id 和 Title。将调试器放置在创建输入的行时，Id 和 Title 未定义。

如何从这个 JSON 创建这些输入？

从控制台复制的返回 JSON：

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

【问题讨论】：

你能发布你的 JSON 吗？
成功后尝试console.log(JSON.stringify(data))。并提供数据你得到了什么
从控制台人员发布和复制的 JSON
$.each(data.Data, 更新到这个并且它没有任何名为Id的键

标签： jquery json ajax asp.net-mvc

【解决方案1】：

您可以直接使用 jQuery 属性来实现：

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

注意如何命名变量，例如“Id”是 Javascript 的关键字。例如，如果是用户，则应命名为 idu。

享受:)

【讨论】：

【解决方案2】：

根据您的 JSON，您需要使用 data 对象的 Data 属性。因此将$.each(data, 更改为$.each(data.Data,

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

【讨论】：

工作就像一个魅力！谢谢 Satpal！