CSE 154

Lab 5 : Urban Dictionary (Ajax, JSON)

Overview

Many web sites like Google, Flickr, and Facebook allow you to access their data as text and JSON. For this lab we will use Ajax to access data from Urban Dictionary, a web list of slang and social terminology. (NOTE: Some content on Urban Dictionary may be considered offensive.)

expected output

Info about Urban Dictionary

We have created a service urban.php that serves Urban Dictionary content. Pass it a term parameter, and it outputs the term's definition as text. For example, for the term "API":

The service returns an HTTP error 410 if the term is not found.

We're providing you the urban.html file for a page to search Urban Dictionary. Download it to your machine; you will not need to modify it. Write JavaScript code in a file urban.js.

Exercise 1: alert 'fnord' definition (~10-15 min)

Write JavaScript code so that when a user clicks "Search", the definition of "fnord" appears as an alert.

  • Listen for clicks on the button with id of lookup. Relevant HTML:
    <button id="lookup">Lookup</button>
expected output

Recall: Making an Ajax request

See Course Slides

Exercise 2: Any word's first definition (~5-10 min)

Modify your code so that the definition of the word typed in the text box (not always "fnord") is displayed.

  • Some words you could test with: API, bling, booyah, fnord, hoopty, JavaScript, kardash, kudos, legit, rep. Or it's fun to look up your first name.
  • Show it inside a div on the page with id of result, rather than as an alert.

              
<div id="controls">
  Term: <input type="text" id="term" />
        <button id="lookup">Lookup</button>
</div>
<div id="result">  <!-- definition should go here -->  </div>

expected output

Exercise 3: Display all definitions from JSON (~20 min)

Our Urban Dictionary lookup service can also send data in JSON format. The JSON data can return multiple definitions, and each definition comes with an example usage and the author's name. To get JSON data, pass our service a parameter all, set to true. The following is an example call and its output:


{
  "entries": [
    {
      "definition": "API = application programming interface\r\n\r\nAn API is a series of functions that programs can use to make the operating system do their dirty work. Using Windows APIs, for example, a program can open windows, files, and message boxes--as well as perform more complicated tasks--by passing a single instruction. Windows has several classes of APIs that deal with telephony, messaging, and other issues.",
      "permalink": "http:\/\/api.urbanup.com\/689981",
      "thumbs_up": 290,
      "author": "Nathanmx",
      "word": "API",
      "defid": 689981,
      "current_vote": "",
      "example": "Windows uses an api called the Win32 API.  You can access many command via the command prompt. Start >> Run >> Type in \"command\" or \"cmd\"",
      "thumbs_down": 46
    },
    {
      "definition": "Active pharmaceutical ingredient. The part of a drug that causes the effect.",
      "permalink": "http:\/\/api.urbanup.com\/5114162",
      "thumbs_up": 17,
      "author": "Wolfy_",
      "word": "API",
      "defid": 5114162,
      "current_vote": "",
      "example": "The API of aspirine is acetylsalicylic acid.",
      "thumbs_down": 22
    },
    {
      "definition": "A underground rapper that even does a few Nu-Metal songs about life, God, or exposing cops or other hypocrites for the cowards they are. Raps or sings about whatever the heck he wants to with a interesting way of talking.",
      "permalink": "http:\/\/api.urbanup.com\/7170332",
      "thumbs_up": 8,
      "author": "Rhonda_Lloyd",
      "word": "Api",
      "defid": 7170332,
      "current_vote": "",
      "example": "Guy 1: \"Yo, have you heard Api Berlitz on Youtube?\"\n\nGuy 2: \"Fuh sho, kid's got talent. Hope he gets far.\"",
      "thumbs_down": 16
    },
    {
      "definition": "Adaptive Pie Interface. Used by various sites to interact with their pie [servers]. Urban Dictionary, for example, has created APIs so that developers with no pie servers of their own my serve pies to customers at low rates.",
      "permalink": "http:\/\/api.urbanup.com\/2650554",
      "thumbs_up": 53,
      "author": "Tyler Menezes",
      "word": "API",
      "defid": 2650554,
      "current_vote": "",
      "example": "$urb = new Urban::API;\r\n$urb->ServePie('me');\r\n$urb->ThankYou();\r\n$bill = $urn->I'llTakeTheBill;\r\ntry{\r\n$bill->pay();\r\n}or{\r\nRUNAWAY();\r\n}",
      "thumbs_down": 61
    },
    {
      "definition": "Skin cream made from beeswax",
      "permalink": "http:\/\/apis.urbanup.com\/2757449",
      "thumbs_up": 7,
      "author": "Jeff  Bendfeld",
      "word": "Apis",
      "defid": 2757449,
      "current_vote": "",
      "example": "Feel the refreshing difference and use apis to sooth your nasty sunburn",
      "thumbs_down": 14
    }
  ]
}

Exercise 3, details

expected output

Modify your code to display each of the definitions of the word:

  • Create an ordered list (ol) of definitions to insert into the result div, using the DOM (document.createElement).
  • For each definition in the JSON, place a new list item (li) inside your ordered list.
  • Insert three new paragraphs into each definition's li :
    1. the definition text
    2. the word's example usage (give it a className of "example")
    3. the author who submitted the definition (preceded by a dash)
  • Use the Ajax request's response as JSON (Hint: use JSON.parse).

Exercise 4: all definitions by an author (~20 min)

Our Urban Dictionary lookup service can also send data in JSON format that lists all terms for which there is a definition submitted by a given author. To get this data, instead of term, pass our service a parameter author, set to the username of the author of interest. The following is an example call and its output:


{
  "author": "silly_walk",
  "dictionary": "Urban Dictionary",
  "entries": [
    {
      "word": "ATM",
      "defid": "825904"
    },
    {
      "word": "moog",
      "defid": "815030"
    },
    {
      "word": "OMC",
      "defid": "1012620"
    },
    {
      "word": "OFC",
      "defid": "1012612"
    },
    {
      "word": "lizington",
      "defid": "1007190"
    },
    {
      "word": "Gary-Stu",
      "defid": "1012625"
    }
  ],
  "school": "University of Washington",
  "timestamp": "Wed 2017 Apr 26, 2:08:36 am"
}

Exercise 4, details

expected output
  • Give the usernames a className of "author" to give them a color and underline.
  • Make it so that when a username is clicked, an Ajax request fetches the data for that username and display the list of all definitions that have been submitted by that user.
  • Display the terms separated by commas in a paragraph inside the page in the div with the id of related.
  • Above the paragraph of terms, create an h2 heading saying, "All entries by (author)".
  
<div id="related">
    <h2>All entries by silly_walk</h2>
    <p>ATM, moog, OMC, OFC</p>
</div>

Bonus Exercises: Tidy up; loading animation

If you finish all of the previous exercises, do some additional work to make the page more robust:

  • Make it so that each word in the "All entries by (author)" area is clickable. When the user clicks that word, that word's text is placed into the top text box, and the page searches for that word and displays all of its definitions.
  • Make the page display a clickable list of all authors. To get the list of authors, send an Ajax request to urban.php with the parameter allauthors=true.
  • Make the page display a reasonable error message if the user asks for a definition of a word that is not found in the dictionary.
  • Make the page clear out any previous definitions if the user searches for a new word.
  • Add a "Loading" animation image that will temporarily occupy the result area while the data is being fetched via Ajax. You can either use this image or create your own from the Ajax loading image site, ajaxload.info.

Solution

Solution (JS)

Runnable Solution