объект jquery возвращает неопределенное значение во втором". forEach()`

#jquery

Вопрос:

здравствуйте, поэтому я хочу отобразить данные json ( вопрос и его ответы ).я использую .forEach() для циклического переброса вопросов ,чтобы получить ответ на вопрос, а другой .forEach() -для переброса его ответов, но показывает только вопрос и возвращает ответы как undefined . я проверил, правильно ли я получаю все данные, и это так.

похоже, это ошибка при отображении объектов ответов.

 res.questions.forEach((el) => {
    $('#additional').before($('<section>
    <h1 class="f-title">'  el.question  '</h1>
    <h3 class="f-subtitle">'  el.commentary  '</h3>
    <div class="container1">'
     el.answers.forEach((i) => {
        '<input type="button" class="buttn" value="' i.answer '"/>'
     }) '</div>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</section>'));

});

Ответ №1:

forEach() ничего не возвращает, поэтому вы объединяетесь undefined в свой HTML.

Вы можете использовать .map() для возврата массива всех <input> строк и .join() объединения их вместе в одну строку.

 res.questions.forEach((el) => {
    $('#additional').before($('<section>
    <h1 class="f-title">'  el.question  '</h1>
    <h3 class="f-subtitle">'  el.commentary  '</h3>
    <div class="container1">'
     el.answers.map((i) => {
        '<input type="button" class="buttn" value="' i.answer '"/>'
     }).join("") '</div>
    <input type="button" name="previous" class="previous action-button" value="Previous" />
    <input type="button" name="next" class="next action-button" value="Next" />
</section>'));

});

1. спасибо за повтор @Barmar, на самом деле я хочу зациклить массив ответов, содержащий объекты, и отобразить его в виде отдельных объектов для элементов кнопок ввода.

2. Разве не для этого все это делается? map() выполняет цикл по массиву объектов и возвращает массив результатов функции. join() объединяет их в одну строку.

3. да, вы правы, но это не сработало, потому что он не мог зациклить массив внутри .before() (и это то, что неправильно). так что я сделал это ,это не красиво, но работает.

Ответ №2:

по-видимому, вы не можете добавить объект, а затем выполнить цикл внутри него.вот почему .forEach() или map() появиться, undefined потому что это не было распознано внутри .before() . поэтому мне пришлось использовать его перед добавлением объектов ,поэтому, когда первый .foreach() закончит, второй достигнет своих объектов и выполнит циклический бросок.

 res.questions.forEach((el) => {
                    $('#additional').before('<section id="' el.id '">
                    <h1 class="f-title">'  el.question  '</h1>
                    <h3 class="f-subtitle">'  el.commentary  '</h3>
                    <div class="container1">
                    </div>
                    <input type="button" name="previous" class="previous action-button" value="Previous" />
                    <input type="button" name="next" class="next action-button" value="Next" />
                    </section>')
                });
                res.questions.forEach((el) => {
                    el.answers.forEach((i) => {
                        $("#dynamic_frm").find("section#" el.id "> .container1").append('
                        <input type="button" class="buttn" value="' i.answer '" />'
                        )})
                })
                });