How to display multiple HTML entities in AJAX and JSON?

Question

I need to display this the image below by using an AJAX call tto get tthe JSON file, parse the JSON into a Javascript object, and tthen display the Javascript object on the web page.

At the moment I have been able to display one star for each question in the "Difficulty" column. However, I can't figure outt how to display the correct amount of stars in relation to the JSON code.

Below is my JSON code and below that, the HTML code:

JSON:

{
  "studentRefNumber": "BGX8P21R5",
  "testResult": [
    {
      "questionNumber": 1,
      "content": "Read a table to solve a problem",
      "topic": "Chance & Data",
      "correctAnswer": "C",
      "yourAnswer": "C",
      "difficultyLevel": 1
    },
    {
      "questionNumber": 2,
      "content": "Calculate the perimeter of a shape",
      "topic": "Measures & Units",
      "correctAnswer": "B",
      "yourAnswer": "B",
      "difficultyLevel": 2
    },
    {
      "questionNumber": 3,
      "content": "Solve a word problem involving speed of a vehicle",
      "topic": "Algebra & Patterns",
      "correctAnswer": "C",
      "yourAnswer": "A",
      "difficultyLevel": 2
    },
    {
      "questionNumber": 4,
      "content": "Solve a word problem involving multiple additions",
      "topic": "Algebra & Patterns",
      "correctAnswer": "C",
      "yourAnswer": "C",
      "difficultyLevel": 3
    },
    {
      "questionNumber": 5,
      "content": "Identify a shape reflected about a given axis",
      "topic": "Space & Geometry",
      "correctAnswer": "A",
      "yourAnswer": "D",
      "difficultyLevel": 5
    },
    {
      "questionNumber": 6,
      "content": "Solve a complex problem involving time",
      "topic": "Measures & Units",
      "correctAnswer": "D",
      "yourAnswer": "A",
      "difficultyLevel": 3
    },
    {
      "questionNumber": 7,
      "content": "Solve a complex problem involving fractions",
      "topic": "Number & Arithmetic",
      "correctAnswer": "B",
      "yourAnswer": "B",
      "difficultyLevel": 4
    },
    {
      "questionNumber": 8,
      "content": "Solve a complex equation involving two variables",
      "topic": "Number & Arithmetic",
      "correctAnswer": "C",
      "yourAnswer": "B",
      "difficultyLevel": 5
    },
    {
      "questionNumber": 9,
      "content": "Identify an object shown from a different position",
      "topic": "Space & Geometry",
      "correctAnswer": "B",
      "yourAnswer": "B",
      "difficultyLevel": 4
    },
    {
      "questionNumber": 10,
      "content": "Translate data table into a graph",
      "topic": "Chance & Data",
      "correctAnswer": "A",
      "yourAnswer": "A",
      "difficultyLevel": 1
    }
  ]
}

HTML:

<html>
<head>
  <script>

  function makeAjaxQueryTestResult(){

    //create  XMLHttpRequest
    var xhttp = new XMLHttpRequest();

    //create a handler for the readyState change
    xhttp.onreadystatechange = function() {
      readyStateChangeHandler(xhttp);
    };

    //get JSON file by making async call
    xhttp.open("GET", "Question4.json", true);
    xhttp.send();
  }

  function readyStateChangeHandler(xhttp){

    if (xhttp.readyState == 4){
      // readyState = 4 means DONE

      if(xhttp.status == 200){
      // status = 200 means OK

        handleStatusSuccess(xhttp);

      }else{
        // status is NOT OK

        handleStatusFailure(xhttp);

      }
    }

  }

  // XMLHttpRequest failed
  function handleStatusFailure(xhttp){

    // display error message

    var displayDiv = document.getElementById("display");

    displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
  }

  // XMLHttpRequest success
  function handleStatusSuccess(xhttp){

    var jsonText = xhttp.responseText;

    // parse the json into an object
    var testResultObj = JSON.parse(jsonText);

    // display the object on the page
    displayTestResult(testResultObj);
  }

  // display the object on the page
  function displayTestResult(testResultObj){
    // print the testResultObj on the console
    // console.log(testResultObj);

    // construct HTML code to display information
    var html = "<h2>Test Result. Student Reference Number: " + testResultObj.studentRefNumber + "</h2>";

    html += "You scored 6 out of 10";

    html += "<br /><br />";

    html += "<table border='1'>";

    html += "<tr><th>Question</th><th>Content</th><th>Topic</th><th>Correct Answer</th><th>Your Answer</th><th>Difficulty</th></tr>";

    for(var i=0; i < testResultObj.testResult.length; i++){

      var testObj = testResultObj.testResult[i];

      html += "<tr>";

      html += "<td>" + testObj.questionNumber + "</td>";
      html += "<td>" + testObj.content + "</td>";
      html += "<td>" + testObj.topic + "</td>";
      html += "<td>" + testObj.correctAnswer + "</td>";

      if (testObj.yourAnswer == testObj.correctAnswer){

        html += "<td align='center' style='color:green'>";
        html += "&#10003;";
        html += "</td>";

      }else{

        html += "<td align='center'>" + testObj.yourAnswer + "</td>";

      }

      var starLvl = "&#11088;" * testObj.difficultyLevel;
      html += "<td>" + starLvl + "</td>";

    }

    var displayDiv = document.getElementById("display");
    displayDiv.innerHTML = html;
  }


  </script>
</head>
<body>
  <button onClick="makeAjaxQueryTestResult()">Get Test Result</button>
  <br /> <br />
  <div id="display">
  </div>
</body>
</html>

Answer 1

You need to loop N times, corresponding to your difficulty level.

var starLvl = "";

for(let i=0; i < testObj.difficultyLevel; i++) {
    starLvl += "&#11088;"; // concatenates N stars
}

html += "<td>" + starLvl + "</td>";

How to display multiple HTML entities in AJAX and JSON?

Question

1 answers

solution1
1 ACCPTED 2020-10-30 12:56:44

How to display multiple HTML entities in AJAX and JSON?

Question

1 answers

solution1 1 ACCPTED 2020-10-30 12:56:44

solution1
1 ACCPTED 2020-10-30 12:56:44