Как я могу добавить данные в массив из списка, используя собственный javascript

ProgramBox

Как я могу добавить данные в массив из списка, используя собственный javascript

Post author:admin
Запись опубликована:6 апреля, 2023
Post category:Вопросы по программированию

#javascript #arrays

#javascript #массивы

Вопрос:

Я вызываю данные из API и перечисляю данные по имени. Я хочу выполнить поиск и добавить объект по имени из списка (используя кнопку Добавить избранный фильм) и сохранить все данные этого объекта в массиве, используя собственный javascript.

Я могу сделать это в Angularjs, но меньше идей с использованием собственного javascript.

 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=8318c431b4fc8a2c4762bf2a52c351eeamp;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="Search" 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>

В ответе JSON я хочу выбрать объект фильма (который я нажимаю на список) под ключом массива result . И добавить этот конкретный объект movie в другой массив. Как я могу это сделать?

1. С какой проблемой вы сталкиваетесь с текущим кодом?

2. @randomSoul не сталкиваюсь с проблемой, я не понимаю, как искать и передавать объект в массиве.

3. Я не совсем понимаю, чего вы пытаетесь достичь. Вы имеете в виду, что хотите найти сведения об объекте movie, введенные пользователем в search (название фильма).

4. @randomSoul Нет, я могу выполнить поиск по фильму и получить списки фильмов в <li> , как вы можете видеть. Теперь я хочу ввести конкретное название фильма из этого списка при Add Fav movies вводе, и когда я нажимаю добавить, объект, связанный с этим конкретным названием фильма, должен сохраняться в массиве.

5. Хорошо. Но ваш Lists пуст. проверьте приведенный выше код.

Ответ №1:

Когда вы вводите название фильма в input (Избранные фильмы) и нажимаете submit , проверьте, имеет ли ввод какое-либо значение. Если это так, то создайте массив textContent вашего списка любимых фильмов, а затем примените фильтр, чтобы получить объекты фильма, имя которых соответствует введенному пользователем значению

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

let results;

function afterLoad() {
    var data = JSON.parse(this.responseText);
    var name = document.createElement('img');
    
    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=8318c431b4fc8a2c4762bf2a52c351eeamp;query=' terms);
    request.send();
}

button.addEventListener("click", afterClick);

const submitBtn = document.querySelector('input[value="Submit"]');
const favMovie = document.querySelector('form > input');

submitBtn.addEventListener('click', function(e) {
    e.preventDefault();
    const favMovieName = favMovie.value;
    if(favMovieName.length > 0) {
        const filteredFavMovies = results.filter(({title}) => title.toLowerCase().includes(favMovieName.toLowerCase()));
        console.log(filteredFavMovies);
    }
});

 <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="Search" 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>

1. Точно, но я хочу передать весь объект этого конкретного фильма, а не только название. Проверьте, что вы получаете в массиве API result в консоли.

2. @NoobCoder — Примените фильтр непосредственно к массиву результатов, потому что в вашем списке избранных есть только название фильма. Смотрите Редактирование.

3. Почему он создает несколько массивов для каждой записи.

4. @NoobCoder — Потому что нет необходимости, чтобы пользователь вводил точное название фильма, возможно, он может ввести несколько инициалов или другое из названия фильма. Я использовал includes , поэтому он проверит, присутствует ли введенное пользователем название фильма в title свойстве. Если вам нужно точное совпадение, вы можете удалить includes и сопоставить с помощью === оператора, но в этом случае, если пользователь введет частичное название фильма, результаты не будут получены.

5. Если ответ решает вашу проблему, отметьте его как принятый, чтобы указать, что проблема решена.

Ответ №2:

Вы можете использовать Array.filter для создания нового массива только с выбранными элементами.

 var filteredItems = allItems.filter(item => {

   if (itesm.year > 1980)
     return true
   else
     return false;

})

или

вы можете использовать метод Array.forEach для обхода исходного массива и делать с элементами все, что захотите:

 allItems.forEach(item => {
   if (item.year > 1980)
      addListItem(item.title, "items");

})

Ответ №3:

Как я вас правильно понял, вы хотите получить объект movies из themoviedb и добавить все результаты в список items ?

Сначала вам нужно заменить:

     request.addEventListener('load', afterLoad);

с помощью:

     request.onload = afterLoad;

и затем нужно действительно определить кнопку.. вот рабочий пример:

 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 searchMovie() {
  var terms = document.getElementById("search").value.split(' ').join(' ');
  var request = new XMLHttpRequest();
  request.onload = afterLoad;
  request.open('GET', 'https://api.themoviedb.org/3/search/movie?api_key=8318c431b4fc8a2c4762bf2a52c351eeamp;query='   terms);
  request.send();
}

var button = document.getElementById('button');
button.addEventListener("click", searchMovie);

 <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" value="Avengers" type="text" class="form-control mr-2" id="search">
    <input type="submit" class="btn btn-dark" value="Search" 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" action="/" method="POST">
      <input type="text" class="form-control mr-2">
      <input id="submit" type="submit" class="btn btn-dark" value="Submit">
    </form>
    <h2 class="title">Lists</h2>
    <ul id="items" class="list-group">

    </ul>
  </div>
</div>

1. Нет, я могу перечислить из moviedb на основе поиска, но теперь я хочу выбрать конкретный фильм и добавить данные объекта, связанные с выбранным фильмом, в другой массив и так далее .. он продолжает добавляться при выборе, точно так же, как добавление избранного из списка.

Ответ №4:

Вы также можете проверить с помощью jsfiddle https://jsfiddle.net/somnath640/emov3yxs/1 /

Я удалил 2-ю форму и добавил идентификатор как для 2-го нижнего, так и для полей ввода. и добавил еще один вызов функции при нажатии 2-й кнопки.

 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(' ');
    console.log(terms);
    var request = new XMLHttpRequest();
    request.addEventListener('load', afterLoad);
    request.open('GET', 'https://api.themoviedb.org/3/search/movie?api_key=8318c431b4fc8a2c4762bf2a52c351eeamp;query=' terms);
    request.send();

    }
    
    
function addToList(){
	var favMovieName = document.getElementById("fabinput").value;
  addListItem(favMovieName, "items");
  console.log(favMovieName);
}

button.addEventListener("click", afterClick);

addfav.addEventListener("click", addToList);

 <!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="Search" id="button">
    </div>
  </header>
  <div class="container">
   <div id="main" class="card card-body">
    <h2 class="title">Add Fav Movies</h2>
    
      <input type="text" class="form-control mr-2" id="fabinput">
      <input type="submit" class="btn btn-dark" id="addfav" value="Add">

    <h2 class="title">Lists</h2>
    <ul id="items" class="list-group">
      
    </ul>
   </div>
  </div>
  </body>
</html>

1. Ваша кнопка поиска сама добавляет первое имя из списка. addFav Кнопка должна добавить. Также я хочу, чтобы весь объект этого конкретного фильма был в отдельном массиве. Не в примере списка :- [ {object of movie avatar}, {object of movie rambo first blood}]