通過javascript對象循環后動態創建文本框

Question

我有一個javascript，它通過ajax請求將一些信息發送到服務器，並接收一些數據作為Questions及其ID作為json數組。

這是我從服務器接收到的響應json數組的樣子：

   [
     {
      "ID":"1",
      "question":"Write a function called addNum. "
        },
     {
      "ID":"3",
      "question":"Write a function called sumDouble "
      }
    ]

這是javascript：

$(document).ready(function(){
    $("form#input_qnumber").submit(function() {

    var questions = $('#questions').attr('value'); // written question
    var quizname = $('#quizname').attr('value');

    if (questions) { // values are not empty
        $.ajax({
            type: "POST",
            url: "https://xxxx",
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            dataType: "application/json",
            data: 'questions='+questions+'&quizname='+quizname,

            success: function (data) 
            {
                var JSONObject = JSON.parse(data); 

                for (var key in JSONObject) {
                    if (JSONObject.hasOwnProperty(key)) {
                        console.log(JSONObject[key]["ID"] + ", " + JSONObject[key]["question"]);
                    }
                }



            }

        });
    }
    else {
        $('div#createquizresp').text("Enter question ID's separated by a comma to be included in the quiz");
        $('div#createquizresp').addClass("error");
    } // else
    $('div#createquizresp').fadeIn();
    return false;
});
});

如您所見，我可以將響應json解析為一個javascript對象數組，循環遍歷並將其內容轉儲到控制台中。 我想要的是創建textarea元素，為其id屬性賦予數組中的“ ID”鍵，並使用數組中的相應問題鍵對其進行標記。 之后，我可以將元素附加到html中的div中。 但是我不太確定該怎么做，甚至不可能。 請幫助。

Answer 1

如果您還想要標簽元素；

for (var key in JSONObject) {
    if (JSONObject.hasOwnProperty(key)) {
        $('<label>')
            .attr('for', JSONObject[key]["ID"])
            .html(JSONObject[key]["question"])
            .appendTo('wherever_you_want');
        $('<textarea>')
            .attr('id', JSONObject[key]["ID"])
            .appendTo('wherever_you_want');
    }
}

Answer 2

創建動態元素輸入和標簽，然后將這些元素附加到適合您需求的父div或正文中。

演示： https : //jsfiddle.net/ew4mqhow/3/

<div id ="display"></div>

<script>
var textbox = document.createElement('input');
textbox.setAttribute("id", JSONObject[key]["ID"]);
var labell = document.createElement('label');
labell.setAttribute("for",JSONObject[key]["question"]);
labell.innerHTML = JSONObject[key]["question"];

document.getElementById('display').appendChild(textbox);
document.getElementById('display').appendChild(labell);
</script>

Answer 3

keune的回答是完美的。 有人建議-確實要在外來ID的前面加上一個前綴。 為了安全起見，您也將ID分配給其他類型的元素（即答案）。

for (var key in JSONObject) {
    if (JSONObject.hasOwnProperty(key)) {
        $('#quizquestions')
            .append($('<label>')
                .attr('for', 'Q' + JSONObject[key]["ID"])
                .html(JSONObject[key]["question"]))
            .append($('<textarea>')
                .attr('id', 'Q' + JSONObject[key]["ID"]))
    }
}