METODO MAP DE JS TABLA JSON API PHP MYSQL

 

then(response => response.json()) Fetch API post json api select data mysql pdo php include the table edit button fuction and delete button fuction method map

 

 

<?php

 

// Establish a connection to the database

$dbh = new PDO('mysql:host=localhost;dbname=mydatabase', 'username', 'password');

 

// Select all rows from the "mytable" table

$stmt = $dbh->query('SELECT * FROM mytable');

 

// Loop through the rows and store them in an array

$rows = array();

while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {

    $rows[] = $row;

}

 

// Encode the array as JSON and output it

echo json_encode($rows);

 

?>

Sure, here is an updated version of the previous code that uses the .map() method to simplify the code for creating the table rows:

 

php

Copy code

<table>

    <thead>

        <tr>

            <th>Column 1</th>

            <th>Column 2</th>

            <th>Actions</th>

        </tr>

    </thead>

    <tbody id="table-body">

        <!-- Data rows will be dynamically added here using JavaScript -->

    </tbody>

</table>

 

<script>

 

// Retrieve the data from the API endpoint and add it to the table

function loadData() {

    fetch('/api/myendpoint')

        .then(response => response.json())

        .then(data => {

            const tableBody = document.getElementById('table-body');

            tableBody.innerHTML = '';

 

            const rows = data.map(row => {

                const tr = document.createElement('tr');

 

                const td1 = document.createElement('td');

                td1.textContent = row.column1;

                tr.appendChild(td1);

 

                const td2 = document.createElement('td');

                td2.textContent = row.column2;

                tr.appendChild(td2);

 

                const td3 = document.createElement('td');

                const editButton = document.createElement('button');

                editButton.textContent = 'Edit';

                editButton.addEventListener('click', () => editRow(row));

                td3.appendChild(editButton);

 

                const deleteButton = document.createElement('button');

                deleteButton.textContent = 'Delete';

                deleteButton.addEventListener('click', () => deleteRow(row));

                td3.appendChild(deleteButton);

 

                tr.appendChild(td3);

 

                return tr;

            });

 

            tableBody.append(...rows);

        });

}

 

// Edit a row

function editRow(row) {

    // TODO: Implement edit functionality

    console.log('Edit row:', row);

}

 

// Delete a row

function deleteRow(row) {

    // TODO: Implement delete functionality

    console.log('Delete row:', row);

}

 

// Load the initial data and set up event listeners

loadData();

 

</script>

The main difference here is that instead of using a forEach loop to create the table rows, we use the map method to transform the data array into an array of table row elements. We then use the spread operator (...) to append all the rows to the table body at once, which can be more efficient than appending each row individually

Comentarios

Publicar un comentario

Entradas populares de este blog

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario HTML: html Copy code <!DOCTYPE html> <html lang="es"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

CONVERTIR IMÁGEN JPG O PNG A WEBP CON PHP DE FORMA SIMPLE

ChatGPT Puedes convertir imágenes de formato JPG o PNG a WebP utilizando la biblioteca GD en PHP. Aquí te muestro un ejemplo simple de cómo hacerlo: php Copy code <?php // Ruta de la imagen de entrada (puede ser JPG o PNG) $imagen_entrada = 'imagen.jpg'; // Ruta de la imagen de salida en formato WebP $imagen_salida = 'imagen.webp'; // Cargar la imagen de entrada $imagen = imagecreatefromstring(file_get_contents($imagen_entrada)); // Verificar si la carga de la imagen fue exitosa if ($imagen !== false) {     // Guardar la imagen en formato WebP     imagewebp($imagen, $imagen_salida);     // Liberar la memoria utilizada por la imagen cargada     imagedestroy($imagen);     echo 'La imagen se ha convertido a formato WebP correctamente.'; } else {     echo 'No se pudo cargar la imagen de entrada.'; } ?> Asegúrate de que la extensión PHP GD esté habilitada en tu servidor. Además, si necesitas ajustar la calidad de la imagen Web...
Leer más