SortBy 函数未对元素进行排序

问题描述 投票：0回答：1

我正在构建一个网页，用于获取包含寺庙信息的 JSON 数据并显示它们。我已经实现了一个下拉过滤器，允许用户根据寺庙的位置和奉献日期来过滤寺庙。然而，实施过滤器后，它没有按预期更新显示的寺庙。

预期的行为是： 当选择“犹他州”时，仅应显示犹他州的寺庙。 当选择“犹他州以外”时，应显示犹他州以外的寺庙。 ... [其他过滤器依此类推]

但是，实际行为是，无论选择什么过滤器，都会显示所有寺庙。

我查过：

  • 获取成功并返回预期的数据结构。
  • sortBy 函数中的控制台日志表明它正在被触发。

关于为什么过滤器可能无法按预期工作或如何进一步调试此问题有什么建议吗？

/* W05: Programming Tasks */

/* Declare and initialize global variables */
const templesElement = document.querySelector('#temples');

let templesList = [];

/* async displayTemples Function */
const displayTemples = (temples) => {
    templesList.forEach(temple => {
        const article = document.createElement('article');
        const templeName = document.createElement('h3');
        templeName.innerHTML = temple.templeName;
        const templeImage = document.createElement('img');
        templeImage.src = temple.imageUrl;
        templeImage.alt = temple.location;
        article.appendChild(templeName);
        article.appendChild(templeImage);
        templesElement.appendChild(article);
    });
   
}

const displayUtahTemples = (temples) => { 
    templesList.forEach(temple => {
        const article = document.createElement('article');
        const templeName = document.createElement('h3');
        templeName.innerHTML = temple.templeName;
        const templeImage = document.createElement('img');
        templeImage.src = temple.imageUrl;
        templeImage.alt = temple.location;
        article.appendChild(templeName);
        article.appendChild(templeImage);
        templesElement.appendChild(article);
        const utahTemples = temples.filter(temple => temple.location.includes('Utah'));
        console.log(utahTemples);
    });
   
}  
displayUtahTemples(templesList);

/* async getTemples Function using fetch()*/
getTemples = async () => {
    const response = await fetch('https://byui-cse.github.io/cse121b-ww-course/resources/temples.json')
    const data = await response.json();
    templesList = data;
    displayTemples(templesList);

}

/* reset Function */
const reset = () => {

    templesElement.textContent = "";
}

// Call the reset function

reset();


// Should log the actual HTML element, not null or undefined


/* sortBy Function */

const sortBy = (temples) => {
    reset();
    

    const compareDate = new Date(1950, 0, 1);
    let filter = document.querySelector('#sortBy').value;
    console.log("sortBy function called with filter:", filter);
    switch (filter) {
        case 'utah':
            displayTemples(temples.filter(temple => temple.location.includes('Utah')));
            console.log(temples);
            break;
        case 'notutah':
            displayTemples(temples.filter(temple => !temple.location.includes('Utah')));
            console.log(temples);
            break;
        case 'older':
            displayTemples(temples.filter(temple => {
                const templeDate = new Date(temple.dedicated.split(', ').reverse().join('-'));
                console.log(temples);
                return templeDate < compareDate;}));
            break;
        case 'all':
            displayTemples(temples);
            break;
        default:
            displayTemples(temples);
    }
};

/* Event Listener */

document.querySelector('#sortBy').addEventListener('change', () => sortBy(templesList));

getTemples();

/* Universal Selector */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* HTML Selectors */
body {
    font-family: 'Roboto', Helvetica, sans-serif;
}

nav {
    background-color: black;
    width: 100%;
    position: fixed;
    top: 0;
}

nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: fit-content;
    margin: 0 auto;
}

nav ul li {
    flex: 1 1 auto;
}

nav ul li:first-child {
    display: block;
    font-size: 2rem;
}

nav ul li:first-child a {
    padding: 1px 10px;
}

nav ul li {
    display: none;
    list-style: none;
    margin: 10px;
}

nav ul li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    font-weight: 600;
    color: white;
    text-align: center;
}

nav ul li a:hover {
    background-color: #efefef;
    color: black;
}

h1, h2 {
    text-align: center;
    margin-bottom: 15px;

}

h1 {
border-bottom: 1px solid #ccc;
}

h2 {
    font-size: 1.2rem;
    color: navy;
    text-align: center;
    margin-top: 30px;
}

main {
    margin-top: 125px;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    align-items: center;
    justify-content: center;
}

picture {
    margin: 0 auto;
}

picture img {
    width: 240px;
    height: auto;
    border-radius: 5%;
    border: 1px solid #ccc;
    box-shadow: 0 0 30px #777;
}

section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 10px
}

label {
    margin: 15px 0;
}

footer {
    background-color: gray;
    color: white;
    padding: 15px;
    text-align: center;
    width: 100%;
    position: fixed;
    bottom: 0;
}

/* Class Selectors */
.active {
    border-bottom: 1px solid yellow;
}

.open li {
    display: block;
}

.block {
    display: block;
}

/* ID Selectors */

/* Media Queries */
@media only screen and (min-width: 32.5em) {
    nav ul {
        flex-direction: row;
    }

    nav ul li:first-child {
        display: none;
    }

    nav ul li {
        display: block;
    }

    main {
        margin: 100px auto 20px;
        grid-template-columns: 250px 1fr;
        max-width: -moz-fit-content;
        max-width: fit-content;

    }



}
dl {
    margin: 0;
    padding: 0;
}

dt {
    font-weight: bold;
    margin: 10px 0;
}

dd {
    margin: 0;
    padding: 0 0 10px 20px; /* Indentation of description */
}


#places-lived {
    margin-bottom: 10%; /* adjust value as needed */
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSE 121b | W05: Programming Tasks</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="styles/main.css">
</head>

<body>
  <nav>
    <ul id="menu">
      <li><a id="toggleMenu">&equiv;</a></li>
      <li><a href="index.html">Home</a></li>
      <li><a href="w01-task.html">W1 Task</a></li>
      <li><a href="w03-task.html">W3 Task</a></li>
      <li><a href="w04-task.html">W4 Task</a></li>
      <li><a href="w05-task.html" class="active">W5 Task</a></li>
      <li><a href="project.html">Project</a></li>
    </ul>
  </nav>
  <main id="gridly">
    <h1>W05: Programming Tasks</h1>
    <h2>Fetch(): Some Latter-day Temples</h2>

    <select id="sortBy" title="Choose a data filter.">
      <option value="" disabled selected>Filter Temples</option>
      <option value="utah">Utah</option>
      <option value="notutah">Outside of Utah</option>
      <option value="older">Built Before 1950</option>
      <option value="all">No Filter</option>
    </select>

    <div id="temples">
    </div>
  </main>


  <footer>
    &copy;<span id="year"></span> | Week 05 - Fetching Temple Data | CSE 121b
  </footer>
  <script src="scripts/main.js"></script>
  <script>
    document.getElementById("year").innerHTML = new Date().getFullYear();
  </script>
  <script src="scripts/w05-task.js"></script>
</body>

</html>
javascript json switch-statement fetch case
1个回答
0
投票

该函数不会更改 TemplesList 数组的值，因此当调用 displayutahtemples 函数时，它始终显示所有寺庙。要解决此问题，

sortBy
函数应首先使用过滤后的值更新templeslist数组，然后使用更新后的数组调用displaytemples函数。

const sortBy = (temples) => {
    reset();

    const compareDate = new Date(1950, 0, 1);
    let filter = document.querySelector('#sortBy').value;
    console.log("sortBy function called with filter:", filter);

    switch (filter) {
        case 'utah':
            templesList = temples.filter(temple => temple.location.includes('Utah'));
            break;
        case 'notutah':
            templesList = temples.filter(temple => !temple.location.includes('Utah'));
            break;
        case 'older':
            templesList = temples.filter(temple => {
                const templeDate = new Date(temple.dedicated.split(', ').reverse().join('-'));
                return templeDate < compareDate;
            });
            break;
        default:
            templesList = temples;
    }

    displayTemples(templesList);
};
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.