Fetch api [object object] [duplicate]

I got a PHP page with the following JSON:

{"id":"1","name":"name1","books":[{"id":"1","title":"title1"},{"id":"2","title":"title2"}]}

I am trying to fetch this but I keep getting the following output:

name1 [object Object], [object Object]

I use the following JavaScript code for the fetch:

window.onload=Send;
function Send() {
    var buttonSend = document.getElementById("buttonSend");
    buttonSend.onclick=HandleClick;
}

function HandleClick() {
    var $id = document.getElementById("textAuthorID").value;
    const URL = 'http://192.168.33.22/opdracht3/list.php?id=';
    fetch(URL + $id)
        .then( function(response) {return response.json(); })
        .then( function(data){ writeOutput(data.name + " " + data.books.join(", ")); } )
        .catch( function(exception) {writeOutput( exception );});
}

function writeOutput(text) {
    var textNode = document.createTextNode(text + "\n");
    var output = document.getElementById("divOutput");
    output.appendChild(textNode);
}

Could anyone help me out to display the names of the books?