使用JS在DOM中添加元素

Question

I'm trying to print in the HTML the data from another part of the site, the data appears on the console, however not in the HTML.

I believe it is an error in the code, could someone point me or direct me?

$.ajax({
    type: "GET",
    url: 'https://example.com',
    crossDomain: true,
    success: function (json) {
        var reservas = json;

        reservas.forEach(function (reserva) {
            $(".reservas").append($("<td/>", {
                html: reserva
            }));

            console.log(reserva);
        });
    },
    error: function (e) {
        console.log(e);
    }
});

If i change the variable reservas for:

var reservas = ["test", "test2", "test3"]

And the elements are being added..

when I give console.log (reserve) , the console return:

Object {
  _id: "10152686662737642",
  nome: "First Person",
  email: "email1@gmail.com",
  __v: 0
}(index):68
Object {
  _id: "10152433045473800",
  nome: "Second Person",
  email: "email2@gmail.com",
  __v: 0
} (index):68

maybe the problem is that is not an array?

Answer 1

Based on your clarifications. I believe what you want to do is:

$(".reservas").append($("<td/>", {
    html: JSON.stringify(reserva)
}));

either that or $(".reservas") isn't finding any elements in the DOM. Also you may want to do something like:

$(".reservas").append($("<td/>", {
    html: reserva.nome + "  " + reserva.email
}));

instead depending on what you actually want to display