JSFiddle - React, Tailwind, and code Playground

HTML

<h2>title: Goodfellas</h2>
<ul>
  <li>rating: R</li>
  <li>year: 1990</li>
  <li>length: 3.25</li>
  <li>comedy</li>
  <li>main characters: James Conway, Henry Hill</li>
  </ul>

JavaScript

var movieList = [{
  title: "Goodfellas",
  rating: "R",
  year: 1990,
  length: 3.25,
  isComedy: false,
  mainCharacters: ["James Conway", "Henry Hill"]
},{
  title: "Blazing Saddles",
  rating: "R",
  year: 1974,
  length: 1.5,
  isComedy: true,
  mainCharacters: ["Bart", "Jim", "Taggart", "Mongo", "Hedley Lamarr"]
},{
  title: "Rush Hour",
  rating: "PG-13",
  year: 1998,
  length: 1.6,
  isComedy: true,
  mainCharacters: ["Lee", "Carter"]
},{
  title: "Lawrence Of Arabia",
  rating: "PG",
  year: 1962,
  length: 3.5,
  isComedy: false,
  mainCharacters: ["Lawrence", "Prince Feisal"]
},{
  title: "The Little Mermaid",
  rating: "G",
  year: 1989,
  length: 1.5,
  isComedy: true,
  mainCharacters: ["Ariel", "Ursula"]
}];


var list = document.createElement("ul");
 
for (var key in movieList) {
    var title = document.createElement("li");
    var titleText = document.createTextNode( movieList[key].title);
    title.appendChild(titleText);  
    list.appendChild(title);
}
document.body.appendChild(list);