Jadi saya memiliki aplikasi kuis yang berbicara dengan API saya di server dengan MongoDB.

Saya ingin mengakses indeks responsnya seperti:

setTimeout(() => {

  axios.get('/api/ninjas')
    .then(function (questions) {
      var data = questions.data;


  $.each(data, function(index, value) {
    /*thequestion = [
      new Question(value.the_question[index], value.the_choices[index], value.the_answer[index])

    ]*/
    console.log(value[index].the_question);
    quiz = new Quiz(thequestion)
    populate()
  })
}), 2000});

Tapi saya mendapatkan Uncaught (in promise) TypeError: Cannot read property 'the_question' of undefined

Jika saya menghapus [index] maka saya mengeluarkan teks pertanyaan di konsol. Saya juga mencoba meletakkan [index] di akhir seperti console.log(value.the_question[index]); tetapi kemudian saya hanya mendapatkan satu huruf pada saat itu di layar.

Jadi pada dasarnya saya memiliki dua objek dalam koleksi MongoDB saya. Masing-masing berisi string the_question, array the_choices dan string the_answer. Saya ingin menampilkan satu pertanyaan pada satu waktu di layar dan pilihan jawabannya, tetapi ketika saya memuat ulang halaman saya hanya mendapatkan pertanyaan terakhir dalam koleksi DB dan semua pilihan jawaban sekaligus ditumpuk tepat satu sama lain, meskipun seharusnya ada tidak lebih dari 3 tombol untuk setiap pertanyaan. Ketika hanya ada satu pertanyaan di DB, itu berfungsi dengan baik.

Satu pertanyaan di DB:

enter image description here

Lebih dari satu pertanyaan dalam koleksi DB:

enter image description here

Jadi saya ingin menggunakan indeks untuk menampilkan satu pertanyaan pada satu waktu, tetapi saya mendapatkan kesalahan saat menggunakannya. Apa yang salah?

Saya harus menyebutkan bahwa itu berfungsi dengan baik saya tidak menggunakan DB untuk ini. Hanya global dalam javascript. Seperti ini, saya mendapatkan satu pertanyaan pada satu waktu

let thequestion = [
  new Question("Which one of the three is a programming language?", ["Javascript", "HTML", "CSS"], "Javascript"),
  new Question("Is NodeJS is a front end or back end framework?", ["Back end", "Front End"], "Back end"),
  new Question("Is JAVA object oriented language?", ["Yes", "No"], "Yes")
]

DB saya terlihat seperti ini:

enter image description here

EDIT: Seluruh kode sumber front-end:

https://codepen.io/Limpuls/pen/rYYLro?editors=1010

1
Limpuls 17 November 2017, 02:25

1 menjawab

Jawaban Terbaik

Anda dapat mencoba yang berikut ini, jika tidak berhasil dapatkah Anda memperbarui pertanyaan Anda dengan output dari log konsol sehingga kami dapat melihat format pertanyaan yang diterima oleh API Anda?

setTimeout(() => {
  axios.get('/api/ninjas')
  .then(function (questions) {
    console.log(
      "received questions:"
      ,JSON.stringify(questions,undefined,2)
    );
    quiz = new Quiz(//create a quiz
      (questions.data || [])//map question data to Question type
      .map(
        function (question) {
          return new Question(
            question.the_question, 
            question.the_choices, 
            question.the_answer
          );
        }
      )
    );
    populate()
  })
  , 2000
});

Mengapa Anda menunggu 2 detik untuk mendapatkan data? Jika ini sedang memuat halaman maka Anda dapat mencoba $(document).ready tetapi saya rasa Anda tidak perlu menunggu dokumen siap untuk mulai mengambil pertanyaan (mungkin hanya terisi):

$(document).ready(x=>populate());
1
HMR 17 November 2017, 03:36