Tengo datos relacionados de uno a muchos (th y td) y en la carga de la página cargo los datos del servidor con ajax, ¿cómo puedo seleccionar cada th (columna) y completarla con datos vinculados a ella?
esta es la tabla:
<table border="1" style="width: 95%;" id="table"> <tr id="ths"> {% for th in ths %} <th> <div data-th_id="{{ th.id }}">{{ th.name }}</div> </th> {% endfor %} </tr> <!-- populate with AJAX --> <!-- <tr> <td> <div></div> </td> </tr> --> <!-- END AJAX --> </table>AJAX:
$("table tr th").each(function () { var th_id = $(this).children().data('th_id') $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", url: "/api/load_tds", data: JSON.stringify({ "th_id": th_id }), success: function (res) { table = document.getElementById("table"); $.each(res, function (index, value) { }); } }); });Espero haberte entendido bien. Desea obtener los datos del servidor para cada columna y luego mostrarlos como <td> en el <tr> correcto.
// creating an empty table: for (let i = 0; i < 5/* amount of columns*/; i++) { var $row = $('<tr/>'); for (let a = 0; a < 5/* amount of rows*/; a++) { $row.append($('<td/>')); } $('table').append($row); } $("table tr th").each(function () { var th_id = $(this).children().data('th_id'); $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", dataType: "json", url: "/api/load_tds", data: JSON.stringify({ "th_id": th_id }), success: function (res) { let th_index = 0 /* set the index of the current column */; // filling the nth td of each row with your data $.each(res, function (index, value) { $('table tr:nth-child(' + index + ') td:nth-child(' + th_index + ')').append('<div>' + value + '</div>'); }); } }); });Como no tengo acceso a su API, no pude probar el código, pero espero que funcione, o al menos el principio lo ayude.
Pero si solo desea cargar los datos en la carga de la página, desde su servidor, sería una buena práctica pasarlos directamente a través de su plantilla Jinja2. Minimiza la transferencia de datos y el código js sería más limpio. ¡Siempre es mejor procesar los datos directamente del lado del servidor en su plantilla que obtenerlos después con Ajax!
Saludos