JSON не добавляется после получения ответа от сервера

Question

Я пытаюсь получить массив json со своей страницы веб-сервиса, который работает в одиночку. Моя проблема в том, что после выполнения запроса ajax данные json не добавляются.

это страница web-service.php

    $query = "SELECT * FROM courses ;";
    $result = mysqli_query($db, $query);
    $q = "SELECT COUNT(*) FROM courses";
    $num_of_rows = mysqli_query($db, $q);
    $number = mysqli_fetch_array($num_of_rows);

    $counter = 0;
    print('{"lenght":"');
    print $number['COUNT(*)'];
    print('",');
    print('"data":[');
    while ($row = @mysqli_fetch_array($result)) {
      echo json_encode($row);
      if ($counter === ($number['COUNT(*)'] - 1)) { } else {
        print(",");
      }
      $counter++;
    }
    print("]}");

это запрос ajax в home.js

    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
     if (this.readyState == 4 && this.status == 200) {
       var json = JSON.parse(this.responseText);
       $("#courses").append(json);        
     } else {
       console.log("readyState "+this.readyState);
       console.log("status "+this.status);
     }
    };
    xhttp.open("GET", "./web-service.php", true);
    xhttp.send();

консоль показывает это

    readyState 1         home.js:35:9
    status 0             home.js:36:9
    readyState 2         home.js:35:9
    status 200           home.js:36:9
    readyState 3         home.js:35:9
    status 200           home.js:36:9