Back

Technologies:

javascriptjavascript
htmlhtml
csscss
avatar
Tolerim
10 hours ago

What is the method for showing this JavaScript object on my interface?

I'm new to programming and working on a project that requires me to utilize the following code in my web interface. However, I'm uncertain which function to use to display the codes with the movies heading and need guidance.

I must also ensure the movies are sortable by year. Can you please help me?

let movieData = {

  "The Darjeeling Limited": {

    plot: "A year after their father's funeral, three brothers travel across India by train in an attempt to bond with each other.",

    cast: ["Jason Schwartzman", "Owen Wilson", "Adrien Brody"],

    runtime: 151,

    rating: 7.2,

    year: 2007,

  },

  "The Royal Tenenbaums": {

    plot: "The eccentric members of a dysfunctional family reluctantly gather under the same roof for various reasons",

    rating: 7.6,

    year: 2001,

    cast: ["Gene Hackman", "Gwnyeth Paltrow", "Anjelica Huston"],

    runtime: 170,

  },

  "Fantastic Mr. Fox": {

    year: 2009,

    plot: "An urbane fox cannot resist returning to his farm raiding ways and then must help his community survive the farmers' retaliation.",

    cast: [

      "George Clooney",

      "Meryl Streep",

      "Bill Murray",

      "Jason Schwartzman",

    ],

    runtime: 147,

    rating: 7.9,

  },

  "The Grand Budapest Hotel": {

    rating: 8.1,

    runtime: 159,

    year: 2014,

    plot: "A writer encounters the owner of an aging high-class hotel, who tells him of his early years serving as a lobby boy in the hotel's glorious years under an exceptional concierge.",

    cast: ["Ralph Fiennes", "F. Murray Abraham", "Mathieu Amalric"],

  },

};
Answers(1)
avatar
Tolerim
10 hours ago
Verified Answer
It looks like you have an object called movieData with various movies and their details stored as values. To display these movies with their details, you can loop through the object and create elements dynamically using JavaScript. Here's some code to get you started: 
// Get a reference to the element where you want to display the movie data
const movieList = document.querySelector('#movie-list');

// Loop through the movieData object
for (const [title, movie] of Object.entries(movieData)) {
  // Create a new element to display the movie data
  const movieBox = document.createElement('div');

  // Set the innerHTML of the element using the movie details
  movieBox.innerHTML = `
    <h2>${title}</h2>
    <p><strong>Plot:</strong> ${movie.plot}</p>
    <p><strong>Cast:</strong> ${movie.cast.join(', ')}</p>
    <p><strong>Runtime:</strong> ${movie.runtime} minutes</p>
    <p><strong>Rating:</strong> ${movie.rating}</p>
    <p><strong>Year:</strong> ${movie.year}</p>
  `;

  // Append the new element to the movieList container
  movieList.appendChild(movieBox);
}
This code creates a new div for each movie, sets the innerHTML of the div using the movie details, and then appends the div to a container element with an id of movie-list. You can adjust the HTML and CSS as needed to fit your project requirements. Once you have the movies displayed, you can look into ways to sort them by year.
;