如何使用基于数据库数组的 javascript 创建动态表单输入答案

【问题标题】：How to create dynamic form inputs using javascript based on a database array如何使用基于数据库数组的 javascript 创建动态表单输入
【发布时间】：2020-08-23 14:03:39
【问题描述】：

我正在为基于数据库的 javascript 表单创建循环而苦苦挣扎。难点在于数组是多维的。

数据库中的数组：

Array ( 
    [0] => Array ( 
        [Diplome] => Master 
        [Institut] => IAE 
    ) 
    [1] => Array ( 
        [Diplome] => Licence 
        [Institut] => Université
    )
)

Javascript 试用：

<?php $array = "array from db above"; ?>

<script type="text/javascript">

var arr = <?php echo json_encode($tr, JSON_PRETTY_PRINT) ?>;
var length = arr.length;

function createForm(){
    for (i in arr) {
        
        form = document.getElementById("formed");

        var x = arr[i].Diplome;
        var y = arr[i].Institut;

        var input = document.createElement('input');
        input.setAttribute('value', x)

        var input2 = document.createElement('input');
        input2.setAttribute('value', y)

        form.appendChild(input);
        form.appendChild(input2);
    }
}

</script>

预期结果：

<form id="formed">
<div>
<input type="text" name="diploma" placeholder="Diplôme" value="Master">
<input type="text" name="institut" placeholder="Institut" value="IAE">
</div>
<div>
<input type="text" name="diploma" placeholder="Diplôme" value="Master">
<input type="text" name="institut" placeholder="Institut" value="IAE">
</div>
</form>

有什么想法吗？非常感谢来自法国！

【问题讨论】：

您面临的问题是什么？
在尝试调用此函数之前表单是否存在？预期结果不符合您的代码
$tr 是什么？您只制作了两个 <input value=""/> 您需要添加更多才能达到预期的结果.. 有什么问题？

标签： javascript php arrays loops

【解决方案1】：

var arr = <?php echo json_encode($tr, JSON_PRETTY_PRINT) ?>;

正在返回string。因此，您需要 JSON.parse(arr) 使用您的 createForm 函数对其进行迭代。

// This is what the return value of json_encode in PHP will look like
var arr  = `[ 
    { "Diplome": "Master", "Institut": "IAE" }, 
    { "Diplome": "Licence", "Institut": "Universit\u00e9" }
]`;

var arr = JSON.parse(arr)
var length = arr.length;


function createForm(){
    for (i in arr) {
        
        form = document.getElementById("formed");

        var x = arr[i].Diplome;
        var y = arr[i].Institut;

        var input = document.createElement('input');
        input.setAttribute('value', x)

        var input2 = document.createElement('input');
        input2.setAttribute('value', y)

        form.appendChild(input);
        form.appendChild(input2);
    }
}


createForm()

&lt;form id="formed"&gt;&lt;/form&gt;

【讨论】：