Как создать динамические входные данные формы с помощью javascript на основе массива базы данных

#javascript #php #arrays #loops

#javascript #php #массивы #циклы

Вопрос:

Я сильно затрудняюсь с циклом создания формы 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>
  

Есть идеи? Большое спасибо из Франции!

Комментарии:

1. С какой проблемой вы столкнулись?

2. существовала ли форма до попытки вызвать эту функцию? Ожидаемый результат не соответствует имеющемуся у вас коду

3. что $tr ? вы создаете только два <input value=""/> , вам нужно добавить намного больше, чтобы достичь ожидаемого результата.. в чем вопрос?

Ответ №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": "Universitu00e9" }
]`;

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()  
 <form id="formed"></form>