Question

我有一个javascript，通过ajax请求向服务器发送一些信息，并将一些数据作为问题及其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属性赋予＆＃39; ID＆＃39;我的数组中的键，并使用数组中相应的问题键标记它。在此之后我可以将元素附加到我的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或身体以适合您的要求。

DEMO：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"]))
    }
}

循环通过javascript对象后动态创建文本框

3 个答案: