<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<title>Arreglo Json</title>
</head>
<body>
<section class="container-fluid">
<h3 class="text-center">SELECCION POR CHECK DE UNA O VARIAS FILAS, ARREGLAR EN JSON Y ENVIARLA POR POST PARA INSERTAR EN BD</h3>
<div class="table-responsive mt-3">
<table class="table">
<thead>
<tr>
<th scope="col">id</th>
<th scope="col">titulo</th>
<th scope="col">categoria</th>
<th scope="col">realizada</th>
<th scope="col">duracion</th>
<th scope="col">calificacion</th>
<th scope="col">formato</th>
<th scope="col">creada</th>
<th scope="col">accion</th>
</tr>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>
<button class="btn btn-success" id="envio" disabled>enviar</button>
<div class="mt-1"><small id="recoje"></div></small>
</section>
<script>
const arreglo = [];
document.addEventListener('DOMContentLoaded', function() {
let json = {
"Harry Potter": {
"Harry Potter and the Sorcerers Stone": {
"id": 1,
"titulo": "Harry Potter and the Sorcerers Stone",
"categoria": "Fantasy",
"realizada": 2001,
"duracion": 152,
"calificacion": "PG",
"formato": "DVD",
"creada": "2015-09-25"
},
"Harry Potter and the Chamber of Secrets": {
"id": 2,
"titulo": "Harry Potter and the Chamber of Secrets",
"categoria": "Fantasy",
"realizada": 2002,
"duracion": 161,
"calificacion": "PG",
"formato": "DVD",
"creada": "2015-09-25"
},
"Harry Potter and the Prison of Azkaban": {
"id": 3,
"titulo": "Harry Potter and the Prison of Azkaban",
"categoria": "Fantasy",
"realizada": 2004,
"duracion": 142,
"calificacion": "PG",
"formato": "DVD",
"creada": "2015-09-25"
},
"Harry Potter and the Goblet of Fire": {
"id": 4,
"titulo": "Harry Potter and the Goblet of Fire",
"categoria": "Fantasy",
"realizada": 2005,
"duracion": 157,
"calificacion": "PG-13",
"formato": "DVD",
"creada": "2015-09-25"
},
"Harry Potter and the Order of the Phoenix": {
"id": 5,
"titulo": "Harry Potter and the Order of the Phoenix",
"categoria": "Fantasy",
"realizada": 2007,
"duracion": 139,
"calificacion": "PG-13",
"formato": "DVD",
"creada": "2015-09-25"
},
"Harry Potter and the Half-Blood Prince": {
"id": 6,
"titulo": "Harry Potter and the Half-Blood Prince",
"categoria": "Fantasy",
"realizada": 2009,
"duracion": 153,
"calificacion": "PG",
"formato": "DVD",
"creada": "2015-09-25"
},
"Harry Potter and the Deathly Hallows : Part I": {
"id": 7,
"titulo": "Harry Potter and the Deathly Hallows : Part I",
"categoria": "Fantasy",
"realizada": 2010,
"duracion": 146,
"calificacion": "PG-13",
"formato": "Blu-ray + DVD",
"creada": "2015-09-25"
},
"Harry Potter and the Deathly Hallows : Part II": {
"id": 8,
"titulo": "Harry Potter and the Deathly Hallows : Part II",
"categoria": "Fantasy",
"realizada": 2011,
"duracion": 130,
"calificacion": "PG-13",
"formato": "Blu-ray + DVD",
"creada": "2015-09-25"
},
"Fantastic Beasts and Where to Find Them": {
"id": 9,
"titulo": "Fantastic Beasts and Where to Find Them",
"categoria": "Fantasy",
"realizada": 2016,
"duracion": 133,
"calificacion": "PG-13",
"formato": "Blu-ray + DVD",
"creada": "2016-08-18"
},
"Fantastic Beasts: The Crimes of Grindelwald": {
"id": 10,
"titulo": "Fantastic Beasts: The Crimes of Grindelwald",
"categoria": "Fantasy",
"realizada": 2018,
"duracion": 134,
"calificacion": "PG-13",
"formato": "DVD",
"creada": "2018-11-06"
}
}
};
let tbody = '';
Object.keys(json).forEach(a => {
Object.keys(json[a]).forEach(b => {
let d = -1;
Object.keys(json[a][b]).forEach(c => {
d++;
tbody += '<td class="' + Object.keys(json[a][b])[d] + '">' + json[a][b][c] + '</td>';
})
tbody += '<td><input class="form-check-input" onchange="sel(this)" type="checkbox" /></td></tr>';
table_body.innerHTML = tbody;
})
})
});
envio.addEventListener('click', () => {
fetch('tabla_post.php', {
method: 'POST',
body: JSON.stringify({
'data': arreglo
}),
headers: {
'Content-Type': 'application/json'
}
})
.then(res => res.text())
.then(ret =>
recoje.innerHTML = ret
);
});
const sel = (este) => {
if (este.checked) {
envio.disabled = false;
CargaJson(este, arreglo);
} else {
BorraJson(este, arreglo);
}
}
const CargaJson = (este, arreglo) => {
let tdlist = este.parentNode.parentNode.childNodes;
let item = {};
for (let h = 0; h < tdlist.length; h++) {
var tdItem = tdlist.item(h);
if (tdItem.className != '') {
item[tdItem.className] = tdItem.innerHTML;
}
}
arreglo.push(item);
}
const BorraJson = (este, arreglo) => {
let tdlist = este.parentNode.parentNode.childNodes;
for (let h = 0; h < tdlist.length; h++) {
var tdItem = tdlist.item(h);
if (tdItem.className != '') {
for (let j = 0; j < arreglo.length; j++) {
if (arreglo[j].id == tdItem.innerHTML) {
arreglo.splice(j, 1)
}
}
}
}
if (arreglo.length == 0) envio.disabled = true;
}
</script>
</body>
</html>