Question

我正在尝试使用PHP脚本，AJAX和预定义的列详细信息数组来构建基于列名的表单。我希望将这些预定义的属性分配给传入的列并构建表单。例如，如果我得到“UserName”列，我想永远是＆lt;输入＆gt;

模板

var template = {
  UserName : {
                label: "User Name:",
                type: "input"
  }
  UserId : {
              label: "User Id:",
              type: "text"
  }
}

来自AJAX请求的传入JSON数组

{"UserName":"bob", "UserId":"1"}

现在我需要以某种方式“匹配”这些。我自己也不确定该做什么。

$.each(data, function(i,e){
  // if index (such as UserName) is found in template array, maybe add the attributes to it?
});

Answer 1

对于您的情况，使用obj.hasOwnProperty(key)来测试它是否存在，连接字符串并使用三元分配来构建输入元素。如果你愿意，你也可以使用if语句。

var $html = '';
$.each(data, function(idx,v){
    $html += template.hasOwnProperty(idx)? '<input type="'+template[idx]['type']+'" name="'+idx+'"/>': '';
});
console.log($html);

Here's your jsFiddle

Answer 2

此jsFiddle中可能会显示包含标签处理的替代（也许是更多的）解决方案。高级别基于以下代码：

$(function () {
    var template = {
        UserName: {
            label: "User Name:",
            type: "input"
        },
        UserId: {
            label: "User Id:",
            type: "text"
        }
    };
    var data = {
        "UserName": "bob",
        "UserId": "1"
    };
    $.each(data, function (key, value) {
        if (template[key] != undefined) {
            $("#here").append($("<span>" + template[key].label + "</span>"));
            $("#here").append($("<input type=\"" + template[key].type + "\">"));
            $("#here").append($("<br>"));
        }
    });
});

从数组中分配属性

2 个答案: