Eleazar Resendez

Just some coding blurbs

Wikipedia Viewer - FreeCodeCamp Challenge

1 month ago · 1 MIN READ
#RESTful APIs  #jQuery 

Herramientas usadas en el proyecto:

Fue un proyecto interesante y rápido porque existe mucha información para realizar lo que se necesita.

Por ejemplo, en w3School es posible encontrar como hacer un input animado para búsquedas: Animated search form.

Pero lo interesante e importante es utilizar la API de Wikipedia, concretamente el modulo action=query que sirve para obtener la información de una página en particular.

El modulo Query de la API tiene varios sub-módulos, para mas información se puede consultar la documentación aquí.

Para el proyecto es necesario obtener una lista a partir de una búsqueda, para ello se utilizó generators.

El webservice:

https://es.wikipedia.org/w/api.php?action=query&format=json&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts&exintro=1&explaintext=1&exsentences=1&origin=*&gsrsearch="+search+"&callback=?

Y finalmente, el código javascript:

$(document).ready(function(){
$('#searchForm').submit(function (e){
e.preventDefault();
var search = $('#search').val();
$('#results').html('');

$.getJSON("https://es.wikipedia.org/w/api.php?action=query&format=json&generator=search&gsrnamespace=0&gsrlimit=10&prop=extracts&exintro=1&explaintext=1&exsentences=1&origin=*&gsrsearch="+search+"&callback=?", function(data){
$('#results').append('<h2>Results for: "' + search + '"</h2>');

$.each(data.query.pages, function (i) {
$('#results').append("<a href='https://es.wikipedia.org/?curid=" + data.query.pages[i].pageid + "' target='_blank' class='list-group-item'>" + data.query.pages[i].title + "<p>"+data.query.pages[i].extract+"</p></a>");
});
});
});
});

Puedes ver el proyecto aquí

···

Eleazar Resendez

Eleazar is a very passionate Web Application Developer and Software Engineer, constantly experimenting with new technologies and striving to better as developer and the development community as a whole.
comments powered by Disqus


Proudly powered by Canvas · Sign In