Let's say you want to look up a movie on IMDB: you enter the title into a search bar, find the movie in the results and open up a page that contains content unique to that specific movie. The page includes the movie's description, the director, the stars, trailers, etc...it's all there! Each movie you navigate to has its own content, all displayed in a consistent structure.

There are, however, thousands upon thousands of movies on IMDB. Creating a unique HTML page for each movie would be absurd! Aside from how endlessly time-consuming it would be to create a separate webpage for every movie ever, what would happen if you wanted to go back and make an change to the layout?

For this lab, we will be exploring the use of dynamic content, creating the page by using DOM updates based on data in the JSON format. Many sites publish and share their information in JSON, so it's a good format for us to learn with. Will cover it in more detail below.

Your task is to access the provided JSON data and use it to populate a webpage using JavaScript and DOM manipulation.

• Retrieve data from a JSON file using JavaScript
• Use DOM manipulation to add HTML content to a page

Many modern websites are built to display dynamic, rather than static content. This means that a site will have some basic HTML skeleton, but the actual text and images displayed are not hardcoded. Instead, specific content is sent separately based on what you want to look at, and when it arrives, JavaScript is used to add this content to the page.

The standard way we send this data is with JavaScript Object Notation, or JSON for short. JSON data is sent as a long string to your browser, but the actual content looks like a set of objects and arrays. For instance, if you go to a recipe website that uses JSON and click on a particular recipe, the data received for the recipe would look something like this:

`{
  "recipeTitle": "Grilled Cheese",
  "description": "Cheese, inside of two pieces of bread, grilled with butter",
  "ingredients": [
    {
      "name": "bread",
      "quantity": 2,
      "units": "slices"
    },
    {
      "name": "cheddar cheese",
      "quantity": 1,
      "units": "cup"
    },
    {
      "name": "butter",
      "quantity": "1/2",
      "units": "cup"
    }
  ],
  "directions": "Grease griddle or frying pan with butter, etc... "
  ...
  }`

JavaScript is used to request this JSON string based on what you've clicked. When it is received, it is converted into a set of nested objects and arrays, which JavaScript can then read and use to fill in the content.

Many of the most popular websites around are built using JSON to deliver their content. In fact, many of your favorite phone apps are too! Understanding how to take data in JSON format and convert it to HTML content is a critical skill in modern web development.

For this lab, we will use data for a movie as an example, creating our own version of an IMDB page. A movie page has an assortment of related content: a title, a director, a description, a list of stars, a rating, an image of the poster, reviews, etc... You task is to get all the JSON content into index.html using JavaScript.

The basic HTML page is provided this time, as your focus should be on the handling the data.

To get started, take a look at the files index.js and movies.json. All of our data is in a separate file from our JavaScript. Since it is a local file, the easiest way to get access to it would be to include an HTML script tag within index.html. Add the following to the file, just before adding aindex.js script tag:

<script type="text/javascript" src="movies.json"></script>
<script type="text/javascript" src="index.js"></script>

Now, since movies.json is loaded up first, we should have access to the JSON content as the movies variable.

With the script tags in place, if you open up index.html in your browser and look at the console, you should see the data output.

The way you choose to write your code is up to you. Use the provided document.addEventListener as a starting point. Use test errors as guidance on what to do next. Your app should do the following:

• Use the HTML ids to populate content from our JSON data with the appropriate HTML elements
• On opening, replace any filler content with all of the data related to 'Titanic'
• Use the provided buttons to switch display content to 'Terminator' data and back

Assign the 'Titanic' data to index.html using DOM manipulation. Each key/value pair in the data corresponds to an element on the webpage, so you'll need to write code that can append all of them. The steps involved will change for different values (i.e. you will need to use loops for the cast and reviews data).

Note: when manipulating the DOM, use innerHTML instead of innerText.