Quiz 02

The APIs in question 2 and 3 have been changed so you can test it. In the quiz, the APIs were made up. The following container will provide the server in the questions:

docker run --rm -p 8080:8080 masoudkf/comp3512
  1. Given the following JSON object and assuming it’s stored in a variable named data:
{
  "user": {
    "id": 12345,
    "profile": {
      "name": "Alice",
      "preferences": {
        "theme": "dark",
        "language": "en"
      }
    }
  }
}

Write code to log to the console:

  • The profile field: console.log(data.user.profile)
  • The name field: console.log(data.user.profile.name)
  • The theme field: console.log(data.user.profile.preferences.theme)
  • The language field: console.log(data.user.profile.preferences.language)

  1. For the following HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
</head>

<body>
    <figure></figure>
</body>
</html>

    Use the fetch API to request data from http://localhost:8080/q2q2 and extract the image URL from the response. Store this URL in a constant. Using Template Strings, create an <img> element with its src attribute set to the image URL. Finally, insert the <img> element as a child of the <figure> element on the page.

    Here's the data returned from the server:

    {
    "title": "Best University Ever",
    "university": {
        "name": "MRU",
        "address": "Calgary, AB, Canada",
        "image": "https://mru.ca/logo.jpg"
    }
}

    Solution:

    const getData = async function() {
    const res = await fetch("http://localhost:8080/q2q2")
    const data = await res.json()
    const imageURL = data.university.image
    const imageEl = `<img src="${imageURL}" />`

    const figureEl = document.querySelector("figure")
    figureEl.innerHTML = imageEl
}

getData()

  1. For the following HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th>Amount</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
</body>
</html>

    Use the fetch API to request data from http://localhost:8080/q2q3 and add one row to the table for every expense item in the response. Note that you need to add the rows to the <tbody> element. Each row (<tr>) will have two columns (<td>): One for showing the item number (starting from 1), and one for the expense amount.

    This is the data returned from the server:

    {
    "expenses": [200, 1500, 600, 500, 700]
}

    For the above data, the table should appear like this on the webpage.



    Note that the number of expense items in the response could be different, so you shouldn’t assume it’s always 5 items with the values shown above. You also need to add a $ sign to the expense amount.

    Solution:

    const getData = async function () {
    const res = await fetch("http://localhost:8080/q2q3")
    const data = await res.json()
    const tbodyElement = document.querySelector("tbody")

    for (let i = 0; i < data.expenses.length; i++) {
        // in each iteration, i need to create a row
        // of two cells 
        const cellsData = `
            <td>${i + 1}</td>
            <td>$${data.expenses[i]}</td> 
        `

        const row = document.createElement("tr")
        row.innerHTML = cellsData

        tbodyElement.append(row)
    }
}

getData()