Display Json using JS trough HTML

I want to display the id info from my JSon, I did the database and the backend with PHP, and I am using JS with HTML to dispaly it in the browser.I am a little stuck at the moment. That is the backend, I linked it the databse with Apache:

?php

$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

$mysqli = new mysqli($servername, $username, $password, $dbname);
include "db_connection.php";
$myJSON = array();

if ($result = $mysqli->query("SELECT * FROM playas")) {

    while($row = $result->fetch_array(MYSQLI_ASSOC)) {
        $myJSON[] = $row;
    }
    echo json_encode($myJSON);
}

$result->close();
$mysqli->close();

in other document i have the js and the html:

var requestOptions = {
    method: 'GET',
    redirect: 'follow'
};

function getData() {
    fetch("http://localhost/practice/backend/playas.php")
        .then(response => response.text())
        .then(myRawData => {
            const myJsonData = JSON.parse(myRawData)
            console.log(myJsonData);
            document.getElementById("contenido").innerHTML = myJsonData;
        })

    .catch(error => console.log('error', error));
    for (let i = 0; i < myJsonData.length(); i++) {

    }

}
getData();

I tried some stuff and I know that a have to iterate the JSon, but it only show right now this: [object Object],[object Object],[object Object],[object Object]

I also know that I have to use document.getElementById("").innerHTML or something similar.

the JSON:

[{"id":"1","nombres_playas":"deveses","numero_hamacas":"10","telefono":"916344412","mail":"deveses@mail.com"}, 
{"id":"2","nombres_playas":"bolonia","numero_hamacas":"13","telefono":"916552312","mail":"bolonia@mail.es"},
{"id":"3","nombres_playas":"granadella","numero_hamacas":"5","telefono":"965431222","mail":null},
{"id":"4","nombres_playas":"malvarosa","numero_hamacas":"21","telefono":"","mail":"malvarosa@yahoo.es"}]

Thanks for the help!!!