Изменить цвет шрифта значения поиска на основе ключа JSON - PullRequest
Новая
       17

Изменить цвет шрифта значения поиска на основе ключа JSON

0 голосов
/ 24 февраля 2020

Я выполнял javascript упражнение и хотел добавить в него дополнительную функциональность для практики. То, что я хочу сделать, это изменить цвет шрифта драгоценного камня (значение «Страница» в JSON файле) в зависимости от определенного значения в файле json.

HTML: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <script src="https://kit.fontawesome.com/4b3dad3b33.js" crossorigin="anonymous"></script>
    <title>Messing With Gems (JSON)</title>
</head>
<body>
<div class="containter mt-5">
    <div class="row">
        <div class="col-md-6 m-auto">
            <h3 class="text-center mb-3">
                <i class="fas fa-gem"> Gem Look Up</i>
            </h3>
            <div class="form-group">
                <input type="text" id="search" class="form-control form-control-lg" 
                placeholder="Type gem/skill name..." />
                <div id="match-list"></div>
            </div>
        </div>
    </div>
</div>
<script src="js/main.js"></script>
</body>
</html>

Javascript: 

const search = document.getElementById('search');
const matchList = document.getElementById('match-list');

// Search gems.json and filter it
const searchGems = async searchText =>  {
    const res = await fetch('../data/gemz.json');
    const gems = await res.json();

// Get Matches to current text input
let matches = gems.filter(gem => {
    const regex = new RegExp(`^${searchText}`, 'gi');
    return gem.Page.match(regex);
});


if(searchText.length === 0) {
    matches = [];
    matchList.innerHTML = '';
}
outputHtml(matches);

};

//Show Results in HTML
const outputHtml = matches => {
    if(matches.length > 0) {
      const html = matches.map(match => `
      <div class="card card-body mb-1">
      <h4>${match.Page}</h4> <em>(${match.gemdiscription})</em> <span class="text-primary">
      ${match.gemtags}</span>
      </div>
      `).join('');
matchList.innerHTML = html;
    }       


};

search.addEventListener('input', () => searchGems(search.value));

JSON Пример (Например, если ключ «primaryattribute» имеет значение «интеллект», я хочу, чтобы значение «Страница» ключа отображалось в синий на веб-сайте, когда вы ищете драгоценный камень) Я хотел бы сделать это с чистым javascript, чтобы лучше понять, как это делается. 

    {
        "Page": "Frostbite",
        "gemdiscription": "Curses all targets in an area, 
making them less resistant to cold damage and giving them a chance to be frozen by cold damage.",
        "gemtags": [
            "Spell",
            "AoE",
            "Duration",
            "Curse",
            "Cold"
        ],
        "primaryattribute": "intelligence",

    }
...