Ayuda

Revise mi el html y el js y tambien el db.json y estan bien pero no se ve las modificaciones que hago en el navegador, ni en el localhost. Adjunto los codigos.

const crearNuevaLinea = (nombre, email) => {
const linea = document.createElement("tr");
const contenido =  `

<td class="td" data-td>
    ${nombre}
    </td>
    <td>${email}</td>
    <td>
    <ul class="table__button-control">
        <li>
            <a href="../screens/editar_cliente.html" class="simple-button simple-button--edit">Editar</a>
        </li>
    <li>
        <button class="simple-button simple-button--delete" type="button">Eliminar</button>
    </li>
    </ul>
</td>

`;
    linea.innerHTML = contenido;
    return linea;
};

const table = document.querySelector("[data-table]");//Lo que va a hacer es recorrer todo el árbol del DOM y obtener este elemento de aquí data-table

const http = new XMLHttpRequest();       //Vamos a crear una comunicación entre el front end y el backend

//Abrir http(metodo,url)

/* CRUD - Métodos HTTP
    Create - POST
    Read - GET
    Update - PUT/PATCH
    Delete - DELETE
*/

http.open("GET", "http://localhost:3000/perfil");//en lugar que el navegador se encargue de la información vamos a hacer que javaScript se encargue de esa tarea

http.send();//Se va a encargar de enviar la petición. desde nuestro proyecto esta saliendo hacia el servidor que se encuentra en la URL

http.onload = () => {//Dentro de la clase JSON hay un método que se llama .parse que ayuda a transformar texto html en javascript
    const data = JSON.parse(http.response);//El JSON.parse va a transformar este texto en codigo javascript. 
    console.log(data);

    data.forEach((perfil) => {
    const nuevaLinea = crearNuevaLinea(perfil.nombre, perfil.email);
    table.appendChild(nuevaLinea);

    });


};

{
  "perfil": [
    {
      "nombre": "Christian",
      "email": "christian@alura.com",
      "id": 1
    },
    {
      "nombre": "gabriela",
      "email": "gabi@alura.com",
      "id": 2
    }
  ]
}