How can I list movie names by results.title in the UI <li>

I know to show data on repeat in AngularJS , but now I am trying on native javascript.

I have called data from TMDB API. Now I need to list those in UI list.

    function afterLoad() {
    var data = JSON.parse(this.responseText);
    console.log(data);
    name.src = data.title;
    }

function afterClick() {
    // changed target to focus search
    var terms = document.getElementById("search").value.split(' ').join('+');
    var request = new XMLHttpRequest();
    request.addEventListener('load', afterLoad);
    request.open('GET', 'https://api.themoviedb.org/3/search/movie?api_key=8318c431b4fc8a2c4762bf2a52c351ee&query='+terms);
    request.send();

    }

button.addEventListener("click", afterClick);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
  <title>Get Movies</title>
</head>
<body>
  <header id="main-header" class="bg-success text-white p-4 mb-3">
    <div class="container">
      <h1 id="header-title">Get Movies<span style="display:none">123</span></h1>
		<input style="align:right" type="text" class="form-control mr-2" id="search">
		<input type="submit" class="btn btn-dark" value="Submit" id="button">
    </div>
  </header>
  <div class="container">
   <div id="main" class="card card-body">
    <h2 class="title">Add Fav Movies</h2>
    <form class="form-inline mb-3">
      <input type="text" class="form-control mr-2">
      <input type="submit" class="btn btn-dark" value="Submit">
    </form>
    <h2 class="title">Lists</h2>
    <ul id="items" class="list-group">
      <li class="list-group-item">Item 1</li>
    </ul>
   </div>
  </div>
  </body>
</html>

How can I list movie names by results.title in the UI <li class="list-group-item">Item 1</li> ?
Also I need to select particular movie by id and store in another json collection.

Solution

In your afterload function, get the results from data and loop over the items. add li to ul using .append

use document.createElement to create a new li.

use document.createTextNode to create text for the newly created li.

and .appendChild() to append li to ul.

function addListItem(title, listId) {
  var ul = document.getElementById(listId);
  var li = document.createElement("li");
  li.className = 'list-group-item';
  li.appendChild(document.createTextNode(title));
  ul.appendChild(li);
}

function afterLoad() {
    var data = JSON.parse(this.responseText);
    var name = document.createElement('img');
    
    const results = data.results;
     
    // loop through items
    results.forEach(item => {
      addListItem(item.title, "items");
    });
    
    name.src = data.title;
    document.body.appendChild(name);
    }

function afterClick() {
    // changed target to focus search
    var terms = document.getElementById("search").value.split(' ').join('+');
    var request = new XMLHttpRequest();
    request.addEventListener('load', afterLoad);
    request.open('GET', 'https://api.themoviedb.org/3/search/movie?api_key=8318c431b4fc8a2c4762bf2a52c351ee&query='+terms);
    request.send();

    }

button.addEventListener("click", afterClick);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"/>
  <title>Get Movies</title>
</head>
<body>
  <header id="main-header" class="bg-success text-white p-4 mb-3">
    <div class="container">
      <h1 id="header-title">Get Movies<span style="display:none">123</span></h1>
		<input style="align:right" type="text" class="form-control mr-2" id="search">
		<input type="submit" class="btn btn-dark" value="Submit" id="button">
    </div>
  </header>
  <div class="container">
   <div id="main" class="card card-body">
    <h2 class="title">Add Fav Movies</h2>
    <form class="form-inline mb-3">
      <input type="text" class="form-control mr-2">
      <input type="submit" class="btn btn-dark" value="Submit">
    </form>
    <h2 class="title">Lists</h2>
    <ul id="items" class="list-group">
      
    </ul>
   </div>
  </div>
  </body>
</html>