Question 138675 in Html Question posted in
Some basic documentation can be found here.

How can I display this JavaScript object on my HTML interface?

So I am new to programming and I have this project that need to be done and I have to use these codes in my web interface. However I am unable to find what function to use to display these codes with the movies heading. Anybody can help please?

This is the code that I need to use. But idk how to display it. I have to make it sortable by year afterwards.

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"],

  },

};
Tags:

2

Answers


  1. 0

    To display the movie data on your web interface, you can use JavaScript to access the HTML document and manipulate the DOM (Document Object Model). Here’s an example of how you can create a table to display the movie data:

    javascript

    // Get the table element from the HTML document
let table = document.getElementById("movie-table");

// Create a table row for the header
let headerRow = document.createElement("tr");

// Create table header cells for each property
let titleHeader = document.createElement("th");
titleHeader.innerText = "Title";
headerRow.appendChild(titleHeader);

let yearHeader = document.createElement("th");
yearHeader.innerText = "Year";
headerRow.appendChild(yearHeader);

let ratingHeader = document.createElement("th");
ratingHeader.innerText = "Rating";
headerRow.appendChild(ratingHeader);

// Add the header row to the table
table.appendChild(headerRow);

// Loop through each movie in the movieData object
for (let movieTitle in movieData) {

  // Create a table row for the movie
  let movieRow = document.createElement("tr");

  // Create table cells for each property of the movie
  let titleCell = document.createElement("td");
  titleCell.innerText = movieTitle;
  movieRow.appendChild(titleCell);

  let yearCell = document.createElement("td");
  yearCell.innerText = movieData[movieTitle].year;
  movieRow.appendChild(yearCell);

  let ratingCell = document.createElement("td");
  ratingCell.innerText = movieData[movieTitle].rating;
  movieRow.appendChild(ratingCell);

  // Add the movie row to the table
  table.appendChild(movieRow);
}

    This code creates a table element in the HTML document and populates it with the movie data from the movieData object. The for…in loop iterates over each movie in the object and creates a new row in the table for each movie, with cells for the title, year, and rating properties. You can customize this code to display more properties and add sorting functionality as needed.

    Login or Signup to reply.
  2. 0

    You can use a for-in loop to iterate over the keys of your movieData object, then get the values of the child object with movieData[key], this selects the value from movieData where the key is key (which appears to be the movie title).

    See this question for how to select an object by key name: Javascript get object key name

    // Shortened movieData for the example

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,
  },
};

for (let key in movieData) {
  console.log(key);
  document.getElementById("demo").innerHTML += `${key}; ${movieData[key].plot}; ${movieData[key].cast}<br/>`;
}
    <p id="demo"></p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search