Question

在寻找了大约一个小时之后，我找不到任何人分享他们在具有相应值的JSON数组中填充HTML页面上的输入字段的方式。

例如，输入框的名称是数组的第一个元素，那么应该进入的值是第二个。

更多示例：

输入表格如下......

<input type="text" id="123111" data-inline="true" class="firstclass" name="xx3111" data-theme="b" style="color: red;">

，JSON数组是：

000001: "firstValue"
000002: "secondValue"
000003: "thirdValue"
000004: "fourthValue"
etc, etc

我想要做的是用数组中的值填充相应的输入框。另一个例子：

带有id 000123的

输入填充了数组中具有数字000123

的字符串

<input type="text" id="000001">填充了字符串firstValue

Answer 1

您需要循环遍历数据对象的每个属性并选择相应的输入元素，然后设置其值：

for (var key in data) {
    document.getElementById(key).value = data[key];
}

data是您调用的对象＆＃34; JSON数组＆＃34;。

Answer 2

$.each(json, function(index, value) {
    $('input#' + index).val(value);
});

B / c我懒惰我刚刚使用了jQuery。这个概念与使用纯js或其他库如下划线的天气相同。我假设您的JSON数组有效并且您只是错误地显示它。

Answer 3

如果要按id选择DOM元素（在本例中为输入字段），如果您不是100％确定该ID存在，则需要检查null或{{1} }。

jsfiddle demo

undefined

Answer 4

// Make one input field, based on value and id
function makeField(value, id) {
    var input = document.createElement('input');
    input = document.createElement('input');
    input.id = id;
    input.className = 'firstclass';
    input.type = 'text';
    input.setAttribute('data-inline', "true");
    input.setAttribute('data-inline', "true");
    input.setAttribute('data-theme', "b");
    input.setAttribute('style', "color:red;");
    input.setAttribute('value', value);
    return input;
}

// Make many fields, from an object.
function makeInputsFromObject(obj) {
    var hasOwnProperty = Object.prototype.hasOwnProperty,
        fragment = document.createDocumentFragment(),
        id,
        input;
    for (id in obj) {
        if (hasOwnProperty.call(obj, id)) {
            fragment.appendChild(makeField(obj[id], id));
        }
    }
    return fragment;
}

// Make many fields, from an array.
function makeInputsFromArray(arr) {
    return arr.reduce(
        function (fragment, value, id) {
            fragment.appendChild(makeField(value, id));
            return fragment;
        },
        document.createDocumentFragment()
    );
}

// Test/demonstration code below.

document.body.appendChild(
    makeInputsFromObject({
        "000001": "firstValue",
        "000002": "secondValue",
        "000003": "thirdValue",
        "000004": "fourthValue"
    })
);

document.body.appendChild(
    makeInputsFromArray([
        "fifthValue",
        "sixthValue",
        "seventhValue",
        "eighthValue"
    ])
);

如测试/演示代码所示，您将数据结构提供给其中一个makeInputs函数（取决于哪个），该函数将返回一个DOM节点（实际上是DocumentFragment）。以通常的方式将其添加到DOM中，它会为您提供字段。

当Array版本突出显示时，如果您实际使用的是Array，则可以将其实现为reduce（）操作。对象不具有内置的reduce（）函数，因此我们即兴发挥，但一般原则是相同的，我们甚至可以使用相同的makeField（）函数。

警告：两种版本都没有定制到您正在寻找的程度。 Array版本没有正确执行ID，并且这两个版本都与name属性的方案完全匹配。但我希望这说明了这一原则。

Answer 5

您正在寻找从具有相应值的JSON数组填充HTML页面上的输入字段。

首先在javascript函数中获取输出值。
然后使用$ .each函数循环遍历json数组，如下所示。
然后再循环遍历HTML函数中的输入字段。
如果json数组中的数组键与id匹配，则将json值作为输入值。

我试图用以下方式粗略地说明它：

<?php
            $.ajax({
                url : path/to/json/output/file,
                type : 'POST', //the way you want to send data to your URL
                dataType : 'json',

                error: function(){
                        $('#result_table_json').append('<p>Error Loading Data</p>');
                        },

                success :function(response){
                //get the array element one by one in the following loop
                    $.each(row,function(key,value){
                        //now check for the right input id that matches the key. I guess all your inputs have something in common eg. class name. So loop through the fields
                        $.each(".firstclass")function(){

                            if( $( this ).attr( 'id' ) === key )
                            {   //fill the input field here 
                                $(this).val(value);                                         }
                            //Alternatively you may append the fields externally in case they dont exist without the json values like this:
                            //$('#result_table_json').append('<input type="text" id="'+key+'" data-inline="true" class="firstclass" name="'+key+'" data-theme="b" value="'+value+'" style="color: red;">');
                        });     
                    });


                }

            });
    ?>

使用JSON数组填充输入字段

5 个答案: