Мой цикл for не работает, и я не знаю, почему. Он даже ничего не выводит на консоль

Я пытаюсь создать игру с рисками, и мне нужно добавить вопросы в таблицу. Я использую цикл forEach, чтобы сначала просмотреть все категории, а затем я хочу использовать цикл for внутри цикла forEach, чтобы просмотреть все вопросы-подсказки. Я застрял на этом какое-то время. Я думаю, что наличие цикла forEach имеет смысл, я просто не понимаю, почему цикл for вообще не работает.

let categories = [
    {title: "Art",
        clues: [
            {question: "Who painted the Sistine chapel ceiling?", answer: "Michelangelo", showing: null},
            {question: "Aureolin is a shade of what color?", answer: "yellow", showing: null},
            {question: "The Parthenon Marbles are controversially located in what museum?", answer: "the British Museum", showing: null},
            {question: "What is the real title of Salvador Dali’s “melting clocks” painting?", answer: "The Persistence of Memory", showing: null},
            {question: "Which art trend became incredibly popular in 2023, although originally first appeared in the 1960s?", answer: "AI art", showing: null},
            {question: "Which of the following is NOT a painting by Salvador Dali; ‘The Temptation of St. Anthony’, ‘The Hallucinogenic Toreador’ or ‘The Sleeping Gypsy’?", answer: "The Sleeping Gypsy", showing: null}
        ],
    },
    {title: "Tech",
        clues: [
            {question: "What app has a green owl as the mascot?", answer: "Duolingo", showing: null},
            {question: "What software company is headquartered in Redmond, Washington?", answer: "Microsoft", showing: null},
            {question: "What software development hosting company has an Octocat for the logo?", answer: "GitHub", showing: null},
            {question: "What programming language is named after a type of Indonesian coffee?", answer: "Java", showing: null},
            {question: "One gigabyte is equal to how many megabytes?", answer: "1000", showing: null},
            {question: "What company made the first portable computer in 1981?", answer: "Osborne Company", showing: null}
        ],
    },
    {title: "Music",
        clues: [
            {question: "What music festival is the most iconic and highly anticipated in the world?", answer: "Lollapalooza", showing: null},
            {question: "Which pop star uses the alias 'Mrs.Doubtfire'", answer: "Sabrina Carpenter", showing: null},
            {question: "Who released the album 'Swimming' in 2018", answer: "Mac Miller", showing: null},
            {question: "Who is the youngest person to headline the Pyramid stage at Glastonbury?", answer: "Billie Eilish", showing: null},
            {question: "Who is the worlds richest pop star?", answer: "Paul McCartney", showing: null},
            {question: "What artist was working at a summer camp as a counsellor just last year but is now a pop sensation?", answer: "", showing: null}
        ],
    },
    {title: "Nature",
        clues: [
            {question: "What is a group of crows called?", answer: "a murder", showing: null},
            {question: "Which planet has the most moons?", answer: "Saturn", showing: null},
            {question: "What is the slowest-moving mammal on earth?", answer: "a sloth", showing: null},
            {question: "Which animal sleeps the least at two hours a day on average?", answer: "an elephant", showing: null},
            {question: "What is the worlds fastest growing plant?", answer: "bamboo", showing: null},
            {question: "What animal are birds descended from?", answer: "dinosaurs", showing: null}
        ],
    },
    {title: "Random",
        clues: [
            {question: "According to Greek mythology, what famed warrior died because he took an arrow to the heel?", answer: "Achilles", showing: null},
            {question: "How many dots appear on a pair of dice?", answer: "42", showing: null},
            {question: "What is the dot over a lowercase letter 'I' called?", answer: "a title", showing: null},
            {question: "Who wrote the famous novel To Kill a Mockingbird?", answer: "Harper Lee", showing: null},
            {question: "How many zip codes are in the US?", answer: "41,642", showing: null},
            {question: "What is the name of the scale used to measure spiciness of peppers?", answer: "Scoville scale", showing: null}
        ],
    },

];

function fillTable() {
    const table = document.querySelector('table');
    const row = table.insertRow();
    categories.forEach( category => {
        const title = row.insertCell(0);
            title.innerHTML = category.title;
        
        for(let i = 0; i < category.clues[i].length; i++){
            console.info(category.clues[i])
            // const clue = row.insertCell 
            // clue.innerHTML = category.clues[i]
        }
    })
}  
<!doctype html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <title>Jeopardy</title>
  <link rel = "stylesheet" href = "jeopardy.css">
</head>
<body>
    <h1>jeopardy</h1>
    <table>
        
    </table>
<script src = "jeopardy.js"></script>

</body>
</html>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
0
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вам нужно вызвать функцию fillTable в конце скрипта:

...


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

Здесь у вас есть 2 проблемы:

1.- Вы определили функцию fillTable, но никогда не вызывали ее, как упомянул @Joel Lefkowitz. Чтобы решить эту проблему, просто добавьте одну строку кода в ваш javascript jeopardy.js.

function fillTable() {
    const table = document.querySelector('table');
    const row = table.insertRow();
    categories.forEach( category => {
        const title = row.insertCell(0);
            title.innerHTML = category.title;
        
        for(let i = 0; i < category.clues[i].length; i++){
            console.info(category.clues[i])
            // const clue = row.insertCell 
            // clue.innerHTML = category.clues[i]
        }
    })
}  
// This will execute your new function
fillTable();

2.- Вы неправильно перебираете подсказки.

Исправьте код следующим образом:

category.clues.forEach(clue => {
   // Here you can access your question
   console.info(clue.question);
   // Here you can access your answer
   console.info(clue.answer);
   // Here you can access your showing property
   console.info(clue.showing);
});

Проблема, с которой вы столкнулись, заключается в том, что вы пытались получить доступ к свойству длины подсказок таким образом: Category.clues[i].length, однако важно отметить, что индекс «i» не обязателен, поскольку вы уже находитесь внутри категория. Вот почему, чтобы получить длину, вам нужно всего лишь получить доступ к подсказкам свойств, например, категории.clues.length, или использовать foreach, как показано в коде.

Большое спасибо! Я не вызывал эту функцию, потому что собирался добавить кнопку, позволяющую запустить игру, а затем вызвать ее. Я не знал, как можно использовать forEach для перебора подсказок, потому что я не использовал правильный синтаксис. Я ценю вашу помощь.

puboot 31.08.2024 22:28

Другие вопросы по теме