Блог

Главная - Вопросы по программированию - Есть ли способ, которым я могу выполнить поиск в реальном времени, который выполняет поиск в моем файле JSON в html?

Есть ли способ, которым я могу выполнить поиск в реальном времени, который выполняет поиск в моем файле JSON в html?

#javascript #html

#javascript #HTML

Вопрос:

Я просмотрел множество руководств о том, как это сделать, но все они, которые я нашел, не смогли мне помочь.

Я хочу создать окно поиска, в котором люди могут искать имя waifu, если они введут ключевое слово.

Вот как выглядят данные JSON

 {
    "waifuID": {
        "1": {
            "names": "Megumin",
            "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b89361-xH1t0q5WeAN8.png",
            "claims": "#1",
            "anime": "KonoSuba"
        },
        "2": {
            "names": "Mai Sakurajima",
            "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b127222-IY5iDRuXLY8i.png",
            "claims": "#2",
            "anime": "Seishun Buta Yarou wa Bunny Girl Senpai no Yume wo Minai"
        },
        "3": {
            "names": "Zero Two",
            "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b124381-pkTKi6HHNuVR.png",
            "claims": "#3",
            "anime": "Darling In The Franxx"
        }
    }
}

Я уверен, что вы можете использовать Object.values для поиска имени, но я не знаю, как на самом деле структурировать HTML-файл. Пожалуйста, помогите.

Ответ №1:

Вот полностью рабочий код для вас с HTML функциональностью поиска. Вы можете использовать keyup функцию для прослушивания keywords введенных во входные данные данных и посмотреть, какие keyword совпадают waifu имена

Если вы ищете точное waifu имя, введенное пользователем, вы можете использовать === в моем примере ниже я использую функцию includes, которая выполняет поиск в строке и выводит, соответствует ли какое-либо введенное слово waifu именам, а затем отображает этот JSON объект.

Живая рабочая демонстрация:

 function getwaifu(keyword) {
  //Display results
  let showResults = document.querySelector('#results')

  let data = {
    "waifuID": {
      "1": {
        "names": "Megumin",
        "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b89361-xH1t0q5WeAN8.png",
        "claims": "#1",
        "anime": "KonoSuba"
      },
      "2": {
        "names": "Mai Sakurajima",
        "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b127222-IY5iDRuXLY8i.png",
        "claims": "#2",
        "anime": "Seishun Buta Yarou wa Bunny Girl Senpai no Yume wo Minai"
      },
      "3": {
        "names": "Zero Two",
        "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b124381-pkTKi6HHNuVR.png",
        "claims": "#3",
        "anime": "Darling In The Franxx"
      }
    }
  }

  //fetch JSON
  if (keyword != '') {
    let output = Object.values(data.waifuID).find(waifu => waifu.names.toLowerCase().includes(keyword.toLowerCase()))
    if (output != undefined) {
      showResults.innerHTML = JSON.stringify(output)
    } else {
      showResults.innerHTML = 'No Results found'
    }
  } else {
    showResults.innerHTML = 'Please enter a keyword to search!'
  }
}  
 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Search JSON</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container">
    <h2>Search waifu name</h2>
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Search JSON</label>
        <input type="email" onkeyup="getwaifu(this.value)" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter a keyword">
        <small id="emailHelp" class="form-text text-muted">Enter a keyword.</small>
      </div>
      <div id="results"></div>
    </form>
  </div>

</body>

</html>

Использование Fetch API для вызова данных вашего JSON файла (код протестирован и работает)

Вот функция, которую вам нужно использовать, если вы хотите выполнить поиск, когда ваш файл JSON находится на сервере или в API. В этом нам нужно извлечь API, чтобы получить файл JSON, а затем выполнить значения объекта и найти функциональность для одного, у нас есть результаты из этого файла JSON на сервере.

 function getwaifu(keyword) {
    //Display results
    let showResults = document.querySelector('#results')

    //fetch JSON
    if (keyword != '') {
        //Fetch API
        fetch('color.json')
        .then(res => res.json())
        .then((out) => {
            let output = Object.values(out.waifuID).find(waifu => waifu.names.toLowerCase().includes(keyword.toLowerCase()))
            if (output != undefined) {
                showResults.innerHTML = JSON.stringify(output)
            } else {
                showResults.innerHTML = 'No Results found'
            }
        }).catch(err => console.error(err));
    } else {
        showResults.innerHTML = 'Please enter a keyword to search!'
    }
}

Комментарии:

1. Большое спасибо, я пытался выяснить, как это сделать ❤❤❤

2. Хм, ваша рабочая демонстрация, похоже, работает нормально, но когда я пытаюсь получить свою фактическую базу данных, ничего не работает. У меня также была эта проблема с ajax.

3. nvm, я исправил это, перейдя в express и создав новую конечную точку, в которой была моя база данных, и извлек ее оттуда.

4. Есть ли какой-либо способ, которым я могу также отобразить waifus img_url? Кроме того, есть ли способ, которым я могу отобразить несколько?

5. @HK420 Добро пожаловать. Да, если вы используете node.js затем вам нужно определить маршрут для доступа к JSON из серверной части. Кроме того, в моей демонстрации отображается полный объект , так что да, вы также можете получить доступ img_url по ключевому слову поиска.

Ответ №2:

Вы можете использовать Object.values() для возврата массива, где каждый объект является элементом в массиве. После этого найдите свой элемент с помощью Array.find():

 Object.values(waifuList.waifuID).find(waifu => waifu.names === "Zero Two")
  

 waifuList = {
    "waifuID": {
        "1": {
            "names": "Megumin",
            "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b89361-xH1t0q5WeAN8.png",
            "claims": "#1",
            "anime": "KonoSuba"
        },
        "2": {
            "names": "Mai Sakurajima",
            "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b127222-IY5iDRuXLY8i.png",
            "claims": "#2",
            "anime": "Seishun Buta Yarou wa Bunny Girl Senpai no Yume wo Minai"
        },
        "3": {
            "names": "Zero Two",
            "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b124381-pkTKi6HHNuVR.png",
            "claims": "#3",
            "anime": "Darling In The Franxx"
        }
    }
}
console.log(
  Object.values(waifuList.waifuID).find(waifu => waifu.names === "Zero Two")
)

Ответ №3:

Расширенный метод for loop проще всего выполнить итерацию по JSON и распечатать значения.

 for (var key in waifuList) {
for (var i = 0; i < waifuList[key].length; i  ) {
    //HTML logic
}

}

Ответ №4:

Другим способом было бы использовать indexOf с filter , он также будет соответствовать частичным строкам.

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

 waifuList = {
  "waifuID": {
    "1": {
      "names": "Megumin",
      "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b89361-xH1t0q5WeAN8.png",
      "claims": "#1",
      "anime": "KonoSuba"
    },
    "2": {
      "names": "Mai Sakurajima",
      "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b127222-IY5iDRuXLY8i.png",
      "claims": "#2",
      "anime": "Seishun Buta Yarou wa Bunny Girl Senpai no Yume wo Minai"
    },
    "3": {
      "names": "Zero Two",
      "img_url": "https://s4.anilist.co/file/anilistcdn/character/large/b124381-pkTKi6HHNuVR.png",
      "claims": "#3",
      "anime": "Darling In The Franxx"
    }
  }
}

// partial of what might be searched. i.e autocomplete..
let search = 'Zero T'

console.log(
  Object.values(waifuList.waifuID).filter(v => {
    // look in name and anime
    if (v.names.indexOf(search) > -1 || v.anime.indexOf(search) > -1) return v
    return false
  })
)