-2

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"],
  },
};
    
document.getElementById("demo").innerHTML = movieData.plot + movieData.cast
<p id="demo"></p>

Improve this question
5
  • 2
    Hello, welcome to stackoverflow, you need to inform which type of javascript you are trying to use. if its ok in jquery, vue, react or strictly vanilla javascript? where you want to display it? what codes have you tried so far? give as much info as possible. Commented May 5, 2023 at 12:29
  • 1
    You have shared your data but no actual code yet the question appears to be asking for a complete solution as to how one would parse this Object literal data, create HTML content and define suitable methods to sort the displayed data. This is way too broad Commented May 5, 2023 at 12:31
  • Can you show the code you have used to try to make this work? Your code example currently is only an object. Commented May 5, 2023 at 12:33
  • @PrakharGyawali vanilla js only. So its a website i have to built to display movies and their data. I have use the code getElementById("demo").innerHTML = movieData.plot + movieData.cast etc. It works only when i remove the other movies and the title the darjeeling limited. I just can't seem to display the movies name Commented May 6, 2023 at 14:35
  • @Apodemus i have use the code getElementById("demo").innerHTML = movieData.plot + movieData.cast. In html its <p id="demo"></p>. Its the only code i could find that work. But it works only when i remove the heading the darjeeling limited and remove the other movies data. It worked for only one movie. I need to use the code as it is and not break it into parts Commented May 6, 2023 at 14:42

1 Answer 1

Reset to default
1

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.