JSON XMLHttpRequest Character Encoding Problem

JavaScript
#1

I’m having some problem with my XMLHttpRequest as special characters aren’t encoded properly and shows html character code instead. Here is what I mean:

632×647

Here is my script:

var section = document.querySelector('section');

var requestURL = 'https://opentdb.com/api.php?amount=10&category=11&difficulty=easy&type=multiple';
var request = new XMLHttpRequest();

request.open('GET', requestURL, true);
request.overrideMimeType('text/json; UTF-8');
request.responseType = 'json';

request.send();

request.onload = function() {
    var loadedQuestions = request.response;
    showQuestions(loadedQuestions);
}

function showQuestions(jsonObj) {
    var questions = jsonObj['results'];

    for (var i = 0; i < questions.length; i++) {
      var myArticle = document.createElement('div');
      myArticle.className = "container";
      var myH3 = document.createElement('h3');
      myH3.textContent = questions[i].question;
      myArticle.appendChild(myH3);
      section.appendChild(myArticle);
    }
  }

Could anyone please help me in fixing this.

Thanks,

Tahir

#2

just change your myH3.textContent to innerHTML, then the HTML will be encoded correctly:

  myH3.innerHTML = questions[i].question;
1 Like
#3

Thanks a lot @DanielSubat. I was trying so hard on setting character encoding using request header.

Working absolutely fine now.

Thanks again.

#4