Resolucion 3
by scyrizales
HTML
Comments
<ul data-load='comments' data-max="2" data-propiedad="name">
</ul>
Todos
<ul data-load='todos' data-max="2" data-propiedad="title">
</ul>
Users
<ul data-load='users' data-max="2" data-propiedad="name">
</ul>
Albums
<ul data-load='albums' data-max="2" data-propiedad="title">
</ul>
JavaScript
function aJson(response) {
return response.json();
}
function imprimirArray(ul, data, max, propiedad) {
ul.innerHTML = data
.filter(function (e, ix) {
return ix < max;
})
.map(function (e) {
return '<li>' + e[propiedad] + '</li>';
})
.join('');
}
var uls = document.querySelectorAll('ul[data-load]');
uls = [].slice.apply(uls);
var promesas = uls.map(function (ul) {
return fetch('https://jsonplaceholder.typicode.com/' + ul.attributes['data-load'].nodeValue)
.then(aJson)
});
Promise.all(promesas).then(function (responses) {
responses.forEach(function (response, ix) {
imprimirArray(
uls[ix],
response,
uls[ix].attributes['data-max'].nodeValue,
uls[ix].attributes['data-propiedad'].nodeValue
);
});
});