遍历对象数组并将每个元素插入html

Question

I have an object that includes both questions and answers. I'm trying to loop through the first set of answers in the object and append them to the HTML.

//create an array with the questions and answers.
var allQuestion = [
    {
        question: "What would your weapon of choice be in battle?",
        answer: [
            "Bow and Arrow",
            "Camouflage",
            "Whiskey.",
            "Snare.",
            "Drones."
        ]
    },
    {
        question: "What is your drink of choice?",
        answer: [
            "Wine.",
            "Beer.",
            "Vodka",
            "Whiskey",
            "Tequila."
        ]
    },
];



$(".one").on("mouseenter", function() {
   //add each answer from first question
    for (i = 0; i < allQuestion[0].answer.length; i++) {
        $(this).find(".list").append("li").html(allQuestion[0].answer[i]);
    };
});

Answer 1

You need to create an li like

$(".one").on("mouseenter", function () {
    //add each answer from first question
    for (i = 0; i < allQuestion[0].answer.length; i++) {
        $('<li />', {
            html: allQuestion[0].answer[i]
        }).appendTo($(this).find(".list"))
    };
});

In your code li is considered as text to be appended, which is then overridden by calling .html()