Tutorial 02

  1. Given the following JSON object and assuming it's stored in a variable named data:

    {
    "name": "John Doe",
    "age": 30,
    "location": {
        "city": "Calgary",
        "country": "Canada"
    }
}

    Write code to log to the console:

    • the name field
    • the age field
    • the city field
    • the country field

    Solution 
    console.log(data.name, data["name"]) // one with the dot notation and one with the bracket notation
console.log(data.age, data["age"]) 
console.log(data.location.city, data["location"]["city"]) 
console.log(data.location.country, data["location"]["country"])

  2. 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 user field
    • the id field
    • the preferences field
    • the theme field
    • the language field

    Solution 
    console.log(data.user, data["user"]) 
console.log(data.user.id, data["user"]["id"]) 
console.log(data.user.profile.preferences, data["user"]["profile"]["preferences"]) 
console.log(data.user.profile.preferences.theme, data["user"]["profile"]["preferences"]["theme"]) 
console.log(data.user.profile.preferences.language, data["user"]["profile"]["preferences"]["language"])

  3. Given the following JSON array and assuming it's stored in a variable named data:

    [
    { "name": "Alice", "age": 25 },
    { "name": "Bob", "age": 30 },
    { "name": "Charlie", "age": 35 }
]

    Write code to log to the console:

    • the name field of the second object
    • the age field of the third object

    Solution 
    console.log(data[1].name, data[1]["name"]) 
console.log(data[2].age, data[2]["age"])

  4. Given the following JSON object and assuming it's stored in a variable named data:

    {
    "name": "Alice",
    "hobbies": ["reading", "swimming", "coding"]
}

    Write code to log to the console:

    • the second hobby
    • all hobbies

    Solution 
    console.log(data.hobbies[1], data["hobbies"][1])
console.log(data.hobbies, data["hobbies"])

  5. Given the following JSON object and assuming it's stored in a variable named data:

    {
    "team": "Engineering",
    "members": [
        { "name": "Alice", "role": "Developer" },
        { "name": "Bob", "role": "Tester" }
    ]
}

    Write code to log to the console:

    • the name and role of the first member of the Engineering team
    • the name and role of the second member of the Engineering team

    Solution 
    console.log(data.members[0].name, data.members[0].role)
console.log(data.members[1].name, data.members[1].role)

  6. Write HTML and JavaScript code that using fetch gets information from this API (https://randomfox.ca/floof) and:

    • sets the src attribute of an HTML img element to the image field of the API response
    • adds the link field of the API response as a text node of an HTML p element

    Solution 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
    <script src="script.js" defer></script>
</head>

<body>
    <img src="" alt="image">
    <p></p>
</body>

</html>

    const getData = async function () {
    const imageElement = document.querySelector("img")
    const pElement = document.querySelector("p")

    const res = await fetch("https://randomfox.ca/floof/")
    const data = await res.json()

    imageElement.setAttribute("src", data.image)
    pElement.innerText = data.link

}

getData()

  7. Write HTML and JavaScript code that using fetch gets information from this API (https://api.thecatapi.com/v1/images/search) and:

    • sets the src attribute of an HTML img element to the url field of the API response
    • adds the id field of the API response as a text node of an HTML p element

    Solution 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
    <script src="script.js" defer></script>
</head>

<body>
    <img src="" alt="image">
    <p></p>
</body>

</html>

    const getData = async function () {
    const imageElement = document.querySelector("img")
    const pElement = document.querySelector("p")

    const res = await fetch("https://api.thecatapi.com/v1/images/search")
    const data = await res.json()

    imageElement.setAttribute("src", data[0].url)
    pElement.innerText = data[0].id
}

getData()

  8. Write HTML and JavaScript code that using fetch gets information from this API (https://random-d.uk/api/v2/random) and:

    • sets the src attribute of an HTML img element to the url field of the API response
    • adds the message field of the API response as a text node of an HTML p element

    Solution 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
    <script src="script.js" defer></script>
</head>

<body>
    <img src="" alt="image">
    <p></p>
</body>

</html>

    const getData = async function () {
    const imageElement = document.querySelector("img")
    const pElement = document.querySelector("p")

    const res = await fetch("https://random-d.uk/api/v2/random")
    const data = await res.json()

    imageElement.setAttribute("src", data.url)
    pElement.innerText = data.message
}

getData()

  9. Write HTML and JavaScript code that using fetch gets information from this API (https://random.dog/woof.json) and:

    • sets the src attribute of an HTML img element to the url field of the API response

    Solution 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
    <script src="script.js" defer></script>
</head>

<body>
    <img src="" alt="image">
</body>

</html>

    const getData = async function () {
    const imageElement = document.querySelector("img")

    const res = await fetch("https://random.dog/woof.json")
    const data = await res.json()

    imageElement.setAttribute("src", data.url)
}

getData()

  10. Write HTML and JavaScript code that using fetch gets information from this API (https://meowfacts.herokuapp.com/) and:

    • adds the first item of the data field of the API response as a text node of an HTML p element

    Solution 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tutorial</title>
    <script src="script.js" defer></script>
</head>

<body>
    <p></p>
</body>

</html>

    const getData = async function () {
    const pElement = document.querySelector("p")

    const res = await fetch("https://meowfacts.herokuapp.com/")
    const data = await res.json()

    pElement.innerText = data.data[0]
}

getData()