2

Вот код. Мне нужно что бы при начинании ввода какой-то песни её полное название выводилась в div но почему-то второй console.log постоянно возвращает название второй песни а в div и вовсе ничего не выводиться. Подскажите, в чём ошибка?

var songs = [{
    artist: {
      name: 'Imagine',
      song: 'Dragons'
    }
  },

  {
    artist: {
      name: 'Five',
      song: 'Finger'
    }
  }
];

var song, name;
songs.map(function(item) {
  song = item.artist.song;
  name = item.artist.name;
  console.log('fisrt', song);
});
document.getElementById('search').onkeyup = function() {
  document.getElementById('founded').innerHTML = '';
  var length = this.value.length;
  if (length > 0) {
    console.log('second', song);
    for (var i = 0; i < song.length; i++) {
      var show = song[i].split('').slice(0, length).join('');
      if (show == this.value) {
        document.getElementById('founded').innerHTML += song[i] + '</br>'
      }
    }
  }
}
<input type="search" id="search" />
<div id="founded"></div>

Так выглядит songs

2
  • Может я чего-то не понимаю, но у вас song - это не массив. Ваш songs.map вообще непонятно что делает о_О 30 окт 2017 в 11:31
  • @Suvitruf взгляние на скрин котрый я добавил.
    – Tick-Tack
    30 окт 2017 в 11:40

1 ответ 1

3

Что происходит в данном коде?

songs.map(function(item) { ... })

вызывает метод .map, который возвращает новый массив и его значение нигде не используется.

Внутри коллбэка для .map присваивается значение переменным song и name. Таким образом, их значения всегда будут соответствовать значениям в последнем элементе массива songs, а именно:

song == Finger
name == Five

Стоит обратить внимания, что значения являются строками.

Далее идет цикл по song, то есть перебираются буквы строки "Finder" и единственный вариант ввода, для которого выполнится условие - "F".


Что надо было сделать?

Задачу, которую пытается решить приведенный код можно сформулировать так:

выбрать из массива элементы, в которых значение поля song начинается с введенной строки, вывести значение song.

  1. Для выборки элементов из массива удобно воспользоваться методом filter

     songs.filter(song=> ... )
    
  2. Для определения того, что одна строка начинается с другой можно воспользоваться методом startsWith или indexOf

     song.artist.song.startsWith(value)
    
  3. Для получения списка состоящего только из песен можно применить метод map

     .map(song => song.artist.song)
    
  4. Для вывода, можно собрать полученные элементы в строку через разделитель <br>, с помощью метода join

     .join('<br>');
    

В итоге код может выглядеть так:

var songs = [{
    artist: {
      name: 'Imagine',
      song: 'Dragons'
    }
  },
  {
    artist: {
      name: 'Five',
      song: 'Finger'
    }
  },
  {
    artist: {
      name: 'Four',
      song: 'FingerPrint'
    }
  }

];

document.getElementById('search').onkeyup = function() {
  document.getElementById('founded').innerHTML = '';
  var length = this.value.length;
  if (length > 0) {
    document.getElementById('founded').innerHTML = songs.filter(song => song.artist.song.startsWith(this.value)) // сравнение с учетом регистра
      .map(song => song.artist.song)
      .join('<br>');


  }
}
<input type="search" id="search" />
<div id="founded"></div>

3
  • Спасибо большое за объяснение, ответ шикарный, всё делает так как я и хотел!!!
    – Tick-Tack
    30 окт 2017 в 12:16
  • @МаксимБуяков, обрати внимание, что startsWith регистрозависима, то есть в слове Finger не будет найдена буква f.
    – Grundy
    30 окт 2017 в 12:19
  • я понимаю, спасибо)
    – Tick-Tack
    30 окт 2017 в 12:24

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.