Поиск-фильтр по json с выводом на html, как сделать?

Question

[eridanlivia]

Здравствуйте. Есть json, есть скрипт, который вывод данные на страницу. А как организовать поиск-фильтр по name?

fetch("users.json")
          .then(res=>res.json())
      
          .then(data=>{
            document.body.innerHTML = data.map((item)=>
                `<div class="textcols-item" style="right: 100%;">

   <span class="name"><b><h3>${item.name}</h3></b></span>
  <br>
  <br>
   <i class="icono-iphone"></i> &nbsp ${item.phone}
  <br>
  <br>
   <i class="icono-mail"></i> &nbsp ${item.email}
   <br>
   </div>`).join(" ");
          })

Comments

[StiflerProger]

Вопрос не понятный. В каком месте фильтр нужен? До вывода на страницу данных?

[eridanlivia]

StiflerProger, сам скрипт представляет, что все данные выводит на страницу, когда вводишь в поиск-фильтр что-то, то не странице оказываются данные.

[StiflerProger]

Все равно ничего не понятно) fetch("users.json")..., тут должны отстаться только отфильтрованные данные? Или тут пусть всё выводится, а фильтровать потом надо?

[eridanlivia]

StiflerProger, извините, что так коряво объясняю. Сначала выводится всё, а фильтровать потом, например, при вводе имени.

[
	{
		"name": "Ferdinand Carney",
		"phone": "[phone]",
		"email": "[e-mail]",
		"address": "563-4648 Curabitur Street",
		"position_name": "Mauris eu turpis. Nulla aliquet. Proin velit. Sed malesuada augue",
		"department": "nisi magna sed dui. Fusce aliquam, enim nec tempus scelerisque,",
		"hire_date": "Dec 24, 2020"
	},
	{
		"name": "Deborah Gonzales",
		"phone": "1-258-431-9358",
		"email": "[e-mail]",
		"address": "705 Pede Avenue",
		"position_name": "dui nec urna suscipit nonummy. Fusce fermentum fermentum arcu. Vestibulum",
		"department": "Phasellus dapibus quam quis diam. Pellentesque habitant morbi tristique senectus",
		"hire_date": "Oct 25, 2020"
	}
]

Answer 1

[Алексей Уколов]

let users = [];
let nameFilter = ``;

// TODO: Тут вы реализуете изменение значения nameFilter из какого-то поля и после этого снова вызываете render()

const render = () => {
    document.body.innerHTML = users
        .filter((item) => !nameFilter || item.name.toUpperCase().includes(nameFilter.toUpperCase())
        .map((item) => `<span class="name">${item.name}</span>`).join(``));
}

fetch(`users.json`)
    .then((res) => res.json())
    .then((data) => users = data)
    .then(render);

Comments

[eridanlivia]

Спасибо! Но когда вставляю данный код, то страница пустая.

[Алексей Уколов]

Ну, надо же не бездумно вставлять, а разбираться. Запрос у вас уходит? Ответ приходит? Может, ошибки какие-то есть в консоли?

[eridanlivia]

Алексей Уколов, because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
31.html:40 Uncaught SyntaxError: missing ) after argument list (at 31.html:40:79)

[Алексей Уколов]

После map закрывающая скобка потерялась, поправил.

[eridanlivia]

Алексей Уколов, большое спасибо) Страница показывает, но самого поля, куда вводить нету...

[Алексей Уколов]

Конечно, нету - я же написал, что вам надо его реализовать самостоятельно. Неужели у вас и с этим сложности? Если так, то вам нужно для начала учебник прочитать: learn.javascript.ru

[Алексей Уколов]

Только, раз вы содержимое всего body перезаписываете в render, это вызовет сложности. Лучше создайте отдельный элемент для вывода результатов и перезаписывайте его.

[eridanlivia]

Алексей Уколов, понял. Спасибо! Буду читать.