Skip to content

Instantly share code, notes, and snippets.

@pochitax

pochitax/index.html

Created June 8, 2022 21:25
Show Gist options
  • Save pochitax/1c987e9568fa252c03601cdec9a72012 to your computer and use it in GitHub Desktop.
Save pochitax/1c987e9568fa252c03601cdec9a72012 to your computer and use it in GitHub Desktop.
Download ZIP
Método each - json externo
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Css Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
</head>
<body>
<div class="container my-5">
<h1 class="mb-3">Listado de alumnos</h1>
<div class="row" id="listadoAlumnos">
<!-- ESTRUCTURA QUE SE REPITE -->
<!--
<div class="col-md-4">
<div class="card">
<img src="https://picsum.photos/id/237/200/300" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
-->
<!--//-->
</div>
</div>
<!-- Script Bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
<!-- Script Jquery -->
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<!-- Script Personalizado -->
<script>
// body onload
$(document).ready(function(){
// TRAER LA LISTA DE OBJETOS DESDE EL JSON
$.get({
url:'https://my-json-server.typicode.com/alaravena/ldp3101/usuarios',
success: function(response){
var alumnos
$.each(response, function(index,element){
alumnos = '<div class="col-md-4 mb-4" id="alumno-'+ element.id +'">';
alumnos += '<div class="card">';
alumnos += '<img src="' + element.avatar +'" class="card-img-top" alt="'+ element.nombre +'">'
alumnos += '<div class="card-body">';
alumnos += '<h5 class="card-title">'+ element.nombre +'</h5>'
alumnos += '<p> Tengo ' + element.edad +' años</p>'
alumnos += '<a href="mailto:'+ element.email +'" class="btn btn-primary">'+ element.email +'</a>'
alumnos += '</div>';
alumnos += '</div>';
alumnos += '</div>'
$('#listadoAlumnos').append(alumnos);
console.log(alumnos)
});
},
error: function(response){
$('#listadoAlumnos').html('<div class="col-md-12 bg-danger text-light p-4">No hay alumnos</div>')
console.log('No trajiste ningún alumno');
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment