TABLA CON BOTON EDITAR Y ELIMINAR FTCH 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

Sure, here is an example of using the Fetch API to POST JSON data to an API endpoint, selecting data from a MySQL database using PDO in PHP, and including an edit button and delete button in a table, with functions for editing and deleting rows:

 

First, let's start with the PHP code to select data from the MySQL database using PDO:

 

php

Copy code

<?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);

 

?>

Next, let's create a table in HTML to display the data and include edit and delete buttons for each row:

 

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>

Then, we can use the Fetch API to retrieve the data from the API endpoint and dynamically add it to the table in the HTML document, and also include functions for editing and deleting rows:

 

php

Copy code

<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 = '';

 

            data.forEach(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);

 

                tableBody.appendChild(tr);

            });

        });

}

 

// 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>

This code will retrieve the data from the API endpoint, loop through each row, create a new table row, add the data for each column and the edit and delete buttons, and then append the row to the table body. It also includes functions for editing and deleting rows, which are currently just logging the row to the console but can be replaced with actual functionality.