Skip to content

Latest commit

 

History

History
58 lines (53 loc) · 1.45 KB

ex_51.md

File metadata and controls

58 lines (53 loc) · 1.45 KB
Raw

Exercise 51

  • Create the following folder/file structure:
/ex_51
  |-- index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JSON</title>
</head>
<body>
  <div id="jsonresponse"></div>
</body>
</html>

index.html

  • Create a basic HTML document
  • Create a script tag on the document head element
  • Define a response variable and assign the following JSON object:
`{
  "title": "A New Hope", 
  "episode_id": 4, 
  "species": [
    "https://swapi.co/api/species/5/", 
    "https://swapi.co/api/species/3/", 
    "https://swapi.co/api/species/2/", 
    "https://swapi.co/api/species/1/", 
    "https://swapi.co/api/species/4/"
  ]
}`
  • Don't forget the `` as they are here to define that this is a JSON string
  • Transform this JSON object into a JavaScript one using JSON.parse
  • Select the jsonresponse id element
  • Add title, episode_id as jsonresponse content
  • Also iterate the response species and create a link for each item and assign the corresponding href
  • At the end you need to have the following HTML:
<div id="jsonresponse">
  <h1>A New Hope</h1>
  <p>Episode ID: 4</p>
  <a href="https://swapi.co/api/species/5/">Link 1</a>
  <a href="https://swapi.co/api/species/3/">Link 2</a>
  <a href="https://swapi.co/api/species/2/">Link 3</a>
  <a href="https://swapi.co/api/species/1/">Link 4</a>
  <a href="https://swapi.co/api/species/4/">Link 5</a>
</div>
  • Create the elements to match this structure