Question

我将ajax响应作为JSON，需要用它填充表单。如何在jQuery或其他东西中做到这一点？是否比使用$(json).each()更好？

JSON：

{ 
  "id" : 12,
  "name": "Jack",
  "description": "Description"
}

表格填写

<form>
  <input type="text" name="id"/>
  <input type="text" name="name"/>
  <input type="text" name="description"/>
</form>

Answer 1

var json={ 
  "id" : 12,
  "name": "Jack",
  "description": "Description"
};
for(key in json)
{
  if(json.hasOwnProperty(key))
    $('input[name='+key+']').val(json[key]);
}

srry我认为这是设置的id属性。

此处：http://jsfiddle.net/anilkamath87/XspdN/

Answer 2

假设data是JSON对象，您可以在$.getJSON回调中使用它：

var $inputs = $('form input');
$.each(data, function(key, value) {
  $inputs.filter(function() {
    return key == this.name;
  }).val(value);
});

Answer 3

来这里寻找一种不涉及jQuery或不进行DOM扫描的解决方案，但没有找到一个解决方案...所以这是我的香草js解决方案，带给您的是其他很早就放弃jQuery的人。

const data = { 
  "id" : 12,
  "name": "Jack",
  "description": "Description",
  "nonExisting": "works too"
}

const { elements } = document.querySelector('form')

for (const [ key, value ] of Object.entries(data) ) {
  const field = elements.namedItem(key)
  field && (field.value = value)
}

<form>
  <input type="text" name="id"/>
  <input type="text" name="name"/>
  <input type="text" name="description"/>
</form>

Answer 4

您可能需要查看jQuery Populate plugin。

虽然这是您拥有的唯一用例，但您也可以手动执行此操作。

Answer 5

只需为jQuery使用JSON插件 - 例如jquery-json。

Answer 6

您也可以考虑使用jQuery模板：

http://api.jquery.com/jQuery.template/

Answer 7

首先，您需要解析JSON字符串，以便获得可以使用的对象：

var o = $.parseJSON(json);

（注意：您也可以在AJAX调用中指定数据类型'json'，然后在获得结果时将其解析为对象。）

然后你可以遍历对象中的属性：

$.each(o, function(key, value){
  $('form [name=' + key + ']').val(value);
});

Answer 8

jQuery Populate plugin和@Mathias提出的代码激励我制作自己的插件：

这是我的myPopulate插件代码。它使用attr参数作为元素属性的名称来用于标识它们。

(function($) {
    $.fn.myPopulate = function(json, attr) {
        var form = $(this);
        $.each(json, function(key, value) {
            form.children('[' + attr + '="' + key + '"]').val(value);
        });
    };
})(jQuery);

使用：

{ 
  "id" : 12,
  "name": "Jack",
  "description": "Description"
}

form1（由name属性匹配）：

<form>
    <input type="text" name="name" />
    <input type="text" name="id" />
    <textarea type="text" name="description" />
</form>
$('#form1').myPopulate(json, 'name');

form2（由alt属性匹配）：

<form id="form2">
    <input type="text" name="nick" alt="name" />
    <input type="text" name="identifier" alt="id" />
    <textarea type="text" name="desc" alt="description" />
</form>
$('#form2').myPopulate(json, 'alt');

Answer 9

我还没有看到解决带有嵌套属性的表单的解决方案。在这里。

//pass in the parent object name, if there is one
let parentName = 'optional';
SyncJsonToForm(data, parentName);

function SyncJsonToForm(obj, path = '') {
     let subpath = path === '' ? path : path + '.';
     $.each(obj, function (key, value) {
          let jsonPath = subpath + key;

          // to debug a particular field (or multiple fields), replace the following JsonPath(s) with the desired property(ies)
          if ([''].includes(jsonPath)) {
               console.log(jsonPath);
               debugger;
          }

          // update the value for the jsonPath
          $(`[name="${jsonPath}"]`).val(value);

          if (typeof value === "object") {
               SyncJsonToForm(value, jsonPath);
          }
     });
}

Answer 10

我将此方法与iCheck元素一起使用。此方法可以进行本机检查和单选输入。

populateForm(frm, data) {
    console.log(data);

    $.each(data, function(key, value) {
        var ctrl = $("[name=" + key + "]", frm);
        switch (ctrl.prop("type")) {
            case "radio":
                if (
                    ctrl.parent().hasClass("icheck-primary") ||
                    ctrl.parent().hasClass("icheck-danger") ||
                    ctrl.parent().hasClass("icheck-success")
                ) {
                    // raido kutularında aynı isimden birden fazla denetçi olduğu için bunları döngüyle almak lazım
                    // multiple radio boxes has same name and has different id. for this we must look to each html element
                    $.each(ctrl, function(ctrlKey, radioElem) {
                        radioElem = $(radioElem);
                        console.log(radioElem);
                        console.log(radioElem.attr("value"));

                        if (radioElem.attr("value") == value) {
                            radioElem.iCheck("check");
                        } else {
                            radioElem.iCheck("uncheck");
                        }
                    });
                } else {
                    $.each(ctrl, function(ctrlKey, radioElem) {
                        radioElem = $(radioElem);
                        console.log(radioElem);
                        console.log(radioElem.attr("value"));

                        if (radioElem.attr("value") == value) {
                            radioElem.attr("checked", value);
                        } else {
                            radioElem.attr("checked", value);
                        }
                    });
                }
                break;

            case "checkbox":
                if (
                    ctrl.parent().hasClass("icheck-primary") ||
                    ctrl.parent().hasClass("icheck-danger") ||
                    ctrl.parent().hasClass("icheck-success")
                ) {
                    if (ctrl.attr("value") == value) {
                        ctrl.iCheck("check");
                    } else {
                        ctrl.iCheck("uncheck");
                    }
                } else {
                    ctrl.removeAttr("checked");
                    ctrl.each(function() {
                        if (value === null) value = "";
                        if ($(this).attr("value") == value) {
                            $(this).attr("checked", value);
                        }
                    });
                }
                break;
            default:
                ctrl.val(value);
        }
    });
}

示例表格：

<form id="form1">
    <div className="form-group row">
        <label className="col-sm-3 col-form-label">
            {window.app.translate(
                "iCheck Radio Example 1"
            )}
        </label>
        <div className="col-sm-9">
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio1_0"
                    name="radio1"
                    value="0"
                />
                <label for="radio1_0">
                    {window.app.translate(
                        "Radio 1 0"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio1_1"
                    name="radio1"
                    value="1"
                />
                <label for="radio1_1">
                    {window.app.translate(
                        "Radio 1 1"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio1_2"
                    name="radio1"
                    value="2"
                />
                <label for="radio1_2">
                    {window.app.translate(
                        "Radio 1 2"
                    )}
                </label>
            </div>
        </div>
    </div>

    <div className="form-group row">
        <label className="col-sm-3 col-form-label">
            {window.app.translate(
                "iCheck Radio Example 2"
            )}
        </label>
        <div className="col-sm-9">
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio2_0"
                    name="radio2"
                    value="0"
                />
                <label for="radio2_0">
                    {window.app.translate(
                        "Radio 2 0"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio2_1"
                    name="radio2"
                    value="1"
                />
                <label for="radio2_1">
                    {window.app.translate(
                        "Radio 2 1"
                    )}
                </label>
            </div>
            <div className="icheck-primary">
                <input
                    type="radio"
                    id="radio2_2"
                    name="radio2"
                    value="2"
                />
                <label for="radio2_2">
                    {window.app.translate(
                        "Radio 2 2"
                    )}
                </label>
            </div>
        </div>
    </div>


    <div className="form-group row">
        <label
            htmlFor="ssl"
            className="col-sm-3 col-form-label"
        >
            {window.app.translate("SSL")}
        </label>
        <div className="col-sm-9">
            <div className="form-group row">
                <div className="col-sm-12">
                    <div className="icheck-primary d-inline">
                        <input
                            type="checkbox"
                            id="ssl"
                            name="ssl"
                            value="1"
                        />
                        <label for="ssl" />
                    </div>
                </div>
            </div>
        </div>
    </div>


</form>

示例json数据：

{
    "radio1": "3",
    "radio2": "1",
    "ssl": "0"
}

编辑：我尝试填充插件，但是它不适用于iCheck和其他东西，例如select2，selected等...

如何使用JSON填写表单？

10 个答案: