Как отфильтровать константу javascript, отображаемую в виде таблицы?

У меня есть следующий код, который будет отображаться в виде таблицы. Я хочу отфильтровать этот контент по годам через мой <select id = "ano">.

Все эти константы являются строками таблицы <tr>.

То есть, когда я выбираю <option> 2018, я хочу отображать как <tr> ТОЛЬКО те константы, которые содержат число «2018» в переменной «Данные».

P.S: Я не хочу "скрывать" то, что не "2018". Я хочу "показать" ТОЛЬКО "2018".

<!DOCTYPE html>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>

<body >
    <section id = "container">


        <div id = "select_calendario">
            <div>
                <select id = "ano">
                    <option value = "2018">2018</option>
                    <option value = "2019">2019</option>
                </select>
            </div>  
        </div>

        <div id = "div_calendario_jogos">
            <table id = "table_calendario_jogos">
                <tbody>
                    <tr id = "table_header">
                        <th>Data</th>
                        <th>Hora</th>
                        <th>Oponente</th>
                        <th>Placar</th>
                        <th>Torneio</th>
                    </tr>
                </tbody>

                <tbody id = "tbody_calendario_jogos">         


                </tbody>
            </table>
        </div>
    </section>  

    <script>    
            LSB_2018_JOGO_1: {
                    Data: "11/03/2019",
                    Hora: "15:00",
                    Oponente: "BMC",
                    Placar: "V, 52-42",
                    Torneio: "LSB",
                },

            LSB_2018_JOGO_2: {
                    Data: "08/04/2018",
                    Hora: "12:30",
                    Oponente: "Drink Team",
                    Placar: "D, 59-61",
                    Torneio: "LSB",
                },

            LSB_2018_JOGO_3: {
                            Data: "22/04/2019",
                            Hora: "10:30",
                            Oponente: "Nitcheroy Ballers",
                            Placar: "V, 53-40",
                            Torneio: "LSB",
                        },

            TUC_2018_JOGO_1: {
                            Data: "11/08/2018",
                            Hora: "12:30",
                            Oponente: "Unirio",
                            Placar: "D, 30-60",
                            Torneio: "TUC",
                        },

            TUC_2018_JOGO_2: {
                            Data: "15/09/2019",
                            Hora: "17:10",
                            Oponente: "UFRJ Aecs",
                            Placar: "V, 29-25",
                            Torneio: "TUC",
                        },

            TUC_2018_JOGO_3: {
                            Data: "20/10/2018",
                            Hora: "16:00",
                            Oponente: "UERJ Economia",
                            Placar: "V, 49-30",
                            Torneio: "TUC",
                        }

};


const tbody = document.getElementById('tbody_calendario_jogos');

for (const key in jogos2018) {
  const tr = document.createElement('tr');

  for (const item in jogos2018[key]) {

    const td = document.createElement('td');
      td.textContent = jogos2018[key][item];

      tr.appendChild(td);
  }

  tbody.appendChild(tr);
}
    </script>
</body>
</html>

Что вы пытаетесь сделать со своими LSB_2018_JOGO_#...? Вам нужно = для назначения переменной, а не :

— 02.02.2019 18:22

Также ваш скрипт запускается только один раз, вам нужно запустить код в прослушивателе событий, таком как click.

— 02.02.2019 19:29

javascript html arrays filter

02.02.2019 18:20

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

438

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я не знал значений, которые вы хотели отобразить, поэтому я просто отобразил даты:

Обновлено: Просто добавьте больше элементов <td> для каждого свойства, которое вы хотите отобразить в чеке.

document.getElementById("ano").addEventListener("change", function(e) {
    const tbody = document.getElementById('tbody_calendario_jogos')
    while (tbody.firstChild) {
        console.info(tbody.firstChild)
        tbody.removeChild(tbody.firstChild)
    }
    for (key in data) {
        const re = new RegExp(`${e.target.value}`)
        const isVal = re.exec(data[key].Data)
        if (isVal != null) {
            const obj = data[key]
            const tr = document.createElement('tr')

            const tdData = document.createElement('td')
            tdData.textContent = obj.Data

            const tdHora = document.createElement('td')
            tdHora.textContent = obj.Hora

            const tdOponente = document.createElement('td')
            tdOponente.textContent = obj.Oponente

            const tdPlacar = document.createElement('td')
            tdPlacar.textContent = obj.Placar

            const tdTorneio = document.createElement('td')
            tdTorneio.textContent = obj.Torneio

            tr.appendChild(tdData)
            tr.appendChild(tdHora)
            tr.appendChild(tdOponente)
            tr.appendChild(tdPlacar)
            tr.appendChild(tdTorneio)
            tbody.appendChild(tr)
        }
    }
})

Обновлено еще раз: Если вам нужен более краткий способ сделать это (обратите внимание: порядок свойств имеет значение в этом методе [он же верхний отображается первым, нижний отображается последним]), замените содержимое if (isVal != null) { ... } на:

const obj = data[key]
const tr = document.createElement('tr')

for (value of Object.values(obj)) {
    const td = document.createElement('td')
    td.textContent = value

    tr.appendChild(td)
    console.info(value)
}

tbody.appendChild(tr)

Это активируется каждый раз, когда изменяется значение select (то есть всякий раз, когда пользователь выбирает параметр), удаляет все элементы "tbody_calendario_jogos", использует регулярное выражение для фильтрации правильных объектов по их году и отображает их.

PS: я организовал ваши данные, чтобы код работал:

const data = {
    LSB_2018_JOGO_1: {
        Data: "11/03/2019",
        Hora: "15:00",
        Oponente: "BMC",
        Placar: "V, 52-42",
        Torneio: "LSB",
    },
    LSB_2018_JOGO_2: {
        Data: "08/04/2018",
        Hora: "12:30",
        Oponente: "Drink Team",
        Placar: "D, 59-61",
        Torneio: "LSB",
    },
    LSB_2018_JOGO_3: {
        Data: "22/04/2019",
        Hora: "10:30",
        Oponente: "Nitcheroy Ballers",
        Placar: "V, 53-40",
        Torneio: "LSB",
    },
    TUC_2018_JOGO_1: {
        Data: "11/08/2018",
        Hora: "12:30",
        Oponente: "Unirio",
        Placar: "D, 30-60",
        Torneio: "TUC",
    },
    TUC_2018_JOGO_2: {
        Data: "15/09/2019",
        Hora: "17:10",
        Oponente: "UFRJ Aecs",
        Placar: "V, 29-25",
        Torneio: "TUC",
    },
    TUC_2018_JOGO_3: {
        Data: "20/10/2018",
        Hora: "16:00",
        Oponente: "UERJ Economia",
        Placar: "V, 49-30",
        Torneio: "TUC",
    }
};

отлично!! Спасибо!! а что если я хочу отобразить все остальные значения??

— 03.02.2019 15:08

Рад помочь, я отредактирую свой ответ, но на самом деле это просто добавление моих элементов <td> в созданный <tr>.

— 03.02.2019 18:59

02.02.2019 19:49