Getting the Wikipedia URL

Creating dynamic Wikipedia search urls (4 min. read)

As of this course, Wikipedia’s API search url is https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=

For an actual search, append a topic. If you need bears, for example, the url looks like this:

https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=bears

See? We just added bears to the end. Visiting that link returns JSON like this.

Press + to interact
[
    "bears",
    [
        "Bear",
        "Bears–Packers rivalry",
        "Bearsden",
        "Bears Ears National Monument",
        "Bearskin",
        "Bear spray",
        "Bearsden Academy",
        "Bearskin Airlines",
        "Bearsted",
        "Bearsville Records"
    ],
    [
        "Bears are carnivoran mammals of the family Ursidae. They are classified as caniforms, or doglike carnivorans.",
        "The Bears–Packers rivalry is a National Football League (NFL) rivalry between the Chicago Bears and the Green Bay Packers.",
        "Bearsden ( ( listen)) is a town in East Dunbartonshire, Scotland, on the northwestern fringe of Greater Glasgow.",
        "Bears Ears National Monument is a United States national monument located in San Juan County in southeastern Utah, established by President Barack Obama by presidential proclamation on December 28, 2016. The monument's original size was 1,351,849 acres (547,074 ha), which was controversially reduced 85% by President Donald Trump on December 4, 2017. The monument protects the public land surrounding the Bears Ears—a pair of buttes—and the Indian Creek corridor rock climbing area.",
        "A bearskin is a tall fur cap, usually worn as part of a ceremonial military uniform. Traditionally, the bearskin was the headgear of grenadiers and remains in use by grenadier and guards regiments in various armies.",
        "Bear spray is a specific aerosol bear deterrent, whose active ingredients are capsaicin and related capsaicinoids, that is used to deter aggressive or charging bears.",
        "Bearsden Academy is a non-denominational, state secondary school in Bearsden, East Dunbartonshire, Scotland.",
        "Bearskin Lake Air Service LP, operating as Bearskin Airlines, is a regional airline based in Thunder Bay, Ontario, Canada.",
        "Bearsted ( BAIR-sted, traditionally BUR-) is a village and civil parish with railway station in mid-Kent, England, two miles (3.2 km) east of Maidstone town centre.",
        "Bearsville Records was founded in 1970 by Albert Grossman. Artists included Todd Rundgren, Elizabeth Barraclough, Foghat, Halfnelson/Sparks, Bobby Charles, Randy VanWarmer, Paul Butterfield's Better Days, Lazarus, Jesse Winchester, and NRBQ."
    ],
    [
        "https://en.wikipedia.org/wiki/Bear",
        "https://en.wikipedia.org/wiki/Bears%E2%80%93Packers_rivalry",
        "https://en.wikipedia.org/wiki/Bearsden",
        "https://en.wikipedia.org/wiki/Bears_Ears_National_Monument",
        "https://en.wikipedia.org/wiki/Bearskin",
        "https://en.wikipedia.org/wiki/Bear_spray",
        "https://en.wikipedia.org/wiki/Bearsden_Academy",
        "https://en.wikipedia.org/wiki/Bearskin_Airlines",
        "https://en.wikipedia.org/wiki/Bearsted",
        "https://en.wikipedia.org/wiki/Bearsville_Records"
    ]
]

We’d like a function that takes a topic and returns the full Wikipedia search URL. As the user types we build the URL based off their input.

Here’s a nice start

Press + to interact
const endpoint = 'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search=';
const getWikipediaSearchUrlFor = (topic) => endpoint + topic;

I’d keep it this way, but this is a Ramda course! We want to get comfortable with using it, so how about this?

Press + to interact
import { concat } from 'ramda';
const getWikipediaSearchUrlFor = concat(
  'https://en.wikipedia.org/w/api.php?origin=*&action=opensearch&search='
);

concat, true to its name, concatenates strings and arrays. It’s curried so providing the URL as one argument returns a function expecting a second string.

Let’s quickly test our code. It should be looking like this so far

Press + to interact
index.js
getInputValue.js
getUrl.js
import 'bootstrap/dist/css/bootstrap.min.css';
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', event => {
  console.log('value:', event.target.value);
});

Go ahead and update your index.js by importing our two functions, along with Ramda’s pipe and tap.

Press + to interact
index.js
getInputValue.js
getUrl.js
import 'bootstrap/dist/css/bootstrap.min.css';
import { pipe, tap } from 'ramda';
import getInputValue from './getInputValue';
import getUrl from './getUrl';
const makeUrlFromInput = pipe(
  getInputValue,
  getUrl,
  tap(console.warn)
);
const inputElement = document.querySelector('input');
inputElement.addEventListener('keyup', makeUrlFromInput);

This new code’s constructing our request URL from the user’s input and logging it via tap.

Check it out.

widget

We’ll be changing it again soon, but it’s nice to see our progress thus far!