Поиск элемента в json по первой букве и вывод результата на экран

Question

Как сделать поиск элемента в json по первой букве, которая нажимается на экране, и после вывести все значение совпадающей первой буквы на экран списком?

На пример имеется такой json:

{
    "status": "ok",
    "count": 5,
    "products": [
    {
        "id": 203848165,
        "url": "/product/bottega-veneta",
        "title": "Bottega Veneta",
        "short_description": "мини-клатч The Pouch"
    },
    {
        "id": 203942281,
        "url": "/product/bugatti-tovarro",
        "title": "Bugatti Tovarro",
        "short_description": "моя личное название производителя"
    },
    {
        "id": 203848009,
        "url": "/product/fabio-bruno",
        "title": "Fabio Bruno",
        "short_description": "коньячная сумка-седло"
    },
    {
        "id": 203848011,
        "url": "/product/alex-santo",
        "title": "Alex Santo",
        "short_description": "коньячная alex-santo"
    },
    {
        "id": 203848022,
        "url": "/product/armani-tarasso",
        "title": "Armani Tarasso",
        "short_description": "лучшая armani-tarasso"
    },
]
}

Спасибо.

Answer 1

Ну вот как то так я попробовал это реализовать, есть еще, что надо доработать, но поиск делает.

let json = {
    "status": "ok",
    "count": 5,
    "products": [
    {
        "id": 203848165,
        "url": "/product/bottega-veneta",
        "title": "Bottega Veneta",
        "short_description": "мини-клатч The Pouch"
    },
    {
        "id": 203942281,
        "url": "/product/bugatti-tovarro",
        "title": "Bugatti Tovarro",
        "short_description": "моя личное название производителя"
    },
    {
        "id": 203848009,
        "url": "/product/fabio-bruno",
        "title": "Fabio Bruno",
        "short_description": "коньячная сумка-седло"
    },
    {
        "id": 203848011,
        "url": "/product/alex-santo",
        "title": "Alex Santo",
        "short_description": "коньячная alex-santo"
    },
    {
        "id": 203848022,
        "url": "/product/armani-tarasso",
        "title": "Armani Tarasso",
        "short_description": "лучшая armani-tarasso"
    },
]
};

const input= document.getElementById('query');
  
input.addEventListener('input', ()=>{
  result.innerHTML  = ''

  let query = input.value;
  let products = json.products.map(item=>{
    if(item.title.toLowerCase().startsWith(query.toLowerCase())){
        result.insertAdjacentHTML('beforeend',`<p> ${item.title} </p>`)
    }
  })
})

<input type='text' placeholder='search...' id='query'>

<div id='result'>

</div>

БЛОГ НА HUSL

Поиск элемента в json по первой букве и вывод результата на экран

Ответы (1 шт):