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:

• https://webster.cs.washington.edu/cse154/labs/9/urban.php?term=API&all=true

{
  "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

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:

• https://webster.cs.washington.edu/cse154/labs/9/urban.php?author=silly_walk

{
  "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

• 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>