Javascript questionnaire not showing on html page

1

I’m creating a questionnaire, this is my html page for it:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Questionnaire</title>
<link rel="stylesheet" href="questionnaire.css">

</head>
<body>

<div class="row">
<div class="side"></div>
<div id="middle"></div>
<div class="side"></div>
</div>
<script src="index.js"></script>
</body>
</html>

And this is the javascript code in the index.js file:

const contents = document.getElementById('middle');
function loadPage(){
console.log("Hello")
getData();
}


async function getData(){
const response = await fetch("example-questionnaire.json");
const data = await response.json();
console.log(data)

makePage(data);
}
getData();



//Create page

function makePage(getObject){
for(let i = 0; i < getObject.length; i++){

    let card = document.createElement('div');
    card.id = getObject[i].id;
    card.classList.add('card');
    contents.appendChild(card);

    //input object and text object

    const questionText = document.createElement('label');
    questionText.setAttribute('for', getObject[i].id)
    questionText.classList.add('label');
    questionText.textContent = getObject[i].title;

        let questionType = getObject[i].input;
        switch (questionType){
            case "number":
            case "text":
            const questionType = document.createElement('input');
            questionType.id = getObject[i].id;
            questionType.type = getObject[i].input;
            questionText.append(questionType);
            break;

        //create text characters
        case "single-select":
            const options = getObject[i].options;
            options.array.forEach(option => {
                const questionOptionText = document.createElement('span');
                questionOptionText.textContent = option;
                const questionOption = document.createElement('input');
                questionOption.type = 'radio';
                questionOption.value = option;
                questionOption.name = getObject[i].id;
                questionText.append(questionOption, questionOptionText)
            });
            break;

        case "multi-select":
            const newOptions = getObject[i].options;
            newOptions.array.forEach(options => {
                const optionText = document.createElement('span');
                optionText.textContent = option;
                const questionOption = document.createElement('input');
                questionOption.type = 'checkbox';
                questionOption.value = option;
                questionOption.name = getObject[i].id;
                questionText.append(questionOption, optionText)

            });
            break;
        }
        card.appendChild(questionText);

}

createButtons();

}

function createButtons(){
const submitButton = document.createElement('input');
const retrieveButton = document.createElement('input');

submitButton.type = 'submit';
retrieveButton.type = 'submit';

contents.append(submitButton, retrieveButton);

submitButton.addEventListener("click", submitData);
if(submitButton.clicked == true){
    console.log("clicked");
}
}

And this is the json data in the json file which I have fetched the data from into the javascript file:

{
 "name": "Example Questionnaire",
 "questions": [
{
  "id": "name",
  "text": "What is your name?",
  "type": "text"
},
{
  "id": "quest",
  "text": "What is your quest?",
  "type": "text"
},
{
  "id": "col",
  "text": "What is your favourite colour?",
  "type": "text"
},
{
  "id": "velo",
  "text": "What is the air-speed velocity of an unladen swallow?",
  "type": "number"
},
{
  "id": "lord",
  "text": "Which is the best lord?",
  "type": "single-select",
  "options": [
    "Lord of the Rings",
    "Lord of the Flies",
    "Lord of the Dance",
    "Lorde"
  ]
},
{
  "id": "langs",
  "text": "Which computer languages have you used?",
  "type": "multi-select",
  "options": [
    "JavaScript",
    "Java",
    "C",
    "Python",
    "Ook",
    "LISP"
  ]
}
]
}

When I run it this what my web page shows:

issue
issue1724×582 36.4 KB

Does anyone know where I’m going wrong? I’m new to javascript and still trying to understand things. Any help is appreciated thank you

2

  1. getObject is an object not an array, you want getObject.questions. I’d suggest using destructuring for the property in the parameter makePage({questions}){...function body code e.g. questions[i].id}

  2. You do not have a title property, you have a text property.

  3. You do not have an input property, you have a type property.

  4. The options property is the array, it does not have an array property on it (you have options.array.forEach, should be options.forEach.

  5. In the second forEach you have options as the argument but you are using option in the forEach body.

  6. console.log(op); op is undefined.

  7. submitButton.addEventListener('click', submitData); submitData is undefined.

3

Hi thank you for the reply!
What do you mean by getObject.questions ? Please could you explain the first point for me a bit more?

Thank you

4

I’d suggest you log out the data you are passing to makePage.

function makePage(getObject) {
  const { questions } = getObject;
  
  console.log('getObject: ', JSON.stringify(getObject, null, 2));
  console.log(
    'getObject.questions: ',
    JSON.stringify(getObject.questions, null, 2)
  );
  
  questions.forEach((question) =>
    console.log('question: ', JSON.stringify(question, null, 2))
  );
  
  //...rest of code
}

As said getObject is the full object, you want to loop the questions array inside it. Make sure to look at the JSON data to understand the structure and its properties.

5

Thank you so much for explaining this makes it clearer in my head

1 Like
6

Glad to have helped, if you have any question feel free to ask.

Happy Coding!

7

This looks like interesting code I would like to try. Is this an example code you are following? Can you link to information on coding a questionnaire in a .json file?

8

Never mind, I misunderstood the nature of this code. I just started coding something similar and I understand better what is going on with this code.