Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 25.02.2019, 18:34
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 72

Как вывести следующую структуру из данных в html?
Всем привет, подскажите, пожалуйста, как правильно решить следующую задачу?
У меня есть некий объект:
const obj = {
  people: [
    {
      id: 1,
      firstName: 'John',
      lastName: 'Smith'
    },
    {
      id: 2,
      firstName: 'Brandon',
      lastName: 'Stone'
    },
    {
      id: 3,
      firstName: 'Sandoval',
      lastName: 'Pratt'
    },
    {
      id: 4,
      firstName: 'Bradley',
      lastName: 'Keegan'
    }
  ]
};

При вводе в input? например: bra
<input type="text" />
Я бы хотел получить:
const obj = {
  people: [
    {
      id: 2,
      firstName: 'Brandon',
      lastName: 'Stone'
    },
    {
      id: 4,
      firstName: 'Bradley',
      lastName: 'Keegan'
    }
  ]
};

Могу предположить, что подобное можно реализовать вот так (как один из вариантов)
const filterVal = document.querySelector('input').value.trim().toLowerCase().split(/\s+/);
const filterBy = ['firstName', 'lastName'];
const filtered = obj.people.filter(item => filterBy.some(prop => filterVal.some(val => item[prop].toLowerCase().includes(val))));

Если будут другие решения, буду благодарен идеям.
Итак, собственно сам вопрос:
Нпример, при click я получил необходимые данные
Мне необходимо вывести следующую стркутуру html:
<div class="autocomplete-suggestions__list">
  <div class="autocomplete-suggestion__item">
    <div>
      Keegan
      <strong>Bra</strong>
      dley
    </div>
    <div>
      <strong>Bra</strong>
      ndon Stone
    </div>
  </div>
</div>
Ответить с цитированием
  #2 (permalink)  
Старый 25.02.2019, 20:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

gsdev99,
https://javascript.ru/forum/dom-wind...tml#post428640
Ответить с цитированием
  #3 (permalink)  
Старый 27.02.2019, 15:05
Аспирант
Отправить личное сообщение для gsdev99 Посмотреть профиль Найти все сообщения от gsdev99
 
Регистрация: 03.02.2019
Сообщений: 72

Спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вывести результат работы js в html newnext (X)HTML/CSS 4 07.02.2019 20:27
как с помощью javascript взять данные из одного файла html и закинуть в другой? rusik Общие вопросы Javascript 10 08.08.2016 12:11
AngularJS/Backbone/Ajax как они взаимодействуют с базами данных? Dionid Общие вопросы Javascript 0 15.06.2014 13:44
Помогите! Как из файла html вывести фото на главную antoxave Элементы интерфейса 14 05.11.2012 22:36
Как вывести данные из PHP Sherminator Events/DOM/Window 2 07.08.2012 20:11