Search code examples
javascriptjqueryhtmlarrayshtml-encode

Print Javascript Array Value Properly

So I have a javascript array and in the array I have this:

var quiz = [{
    "question": "What is the greatest common factor of 105 and 126?",
    "image": "",
    "choices": ["3", "7",
        "9", "21", "35"
    ],
    "correct": "21",
    "conceptlink": "https://www.khanacademy.org/math/in-sixth-grade-math/playing-numbers/highest-common-factor/v/greatest-common-divisor",
    "explanation": "In order to solve this question, you must factor each number into prime factors<h1>Height</h1>",
}];

Focus on the explanation subset of the array. I have an H1 element that I want to print but, instead, it is printed as part of a text instead of code. In other words, the text would read:

enter image description here

Instead of: enter image description here

Here's the code that prints the explanation

 $('#explanation').html('<strong>Incorrect.</strong> ' + htmlEncode(quiz[currentquestion]['explanation']));

Any help from the js experts would be gladly appreciated!!

Solution

  • You almost have it. I'm not sure what your function htmlEncode() does, but if you don't use it, it should give you what you want. Here's a jsbin demonstrating it: http://jsbin.com/yeyuqoqabe/edit?html,output

    If you want to know how to make the string HTML safe, here's a question that can help: How to encode a string in JavaScript for displaying in HTML?