Jump to content

.London Domains - £4
Photo

JSON help what am I doing wrong?


  • Please log in to reply
No replies to this topic

#1 historygirllfc

historygirllfc
  • Hefty Member
  • Advanced Member
  • 643 posts

Posted 06 June 2019 - 18:58

I'm attempting to parse some JSON and pull out parts of it and display them as HTML on a page but I've tried several things and cannot get it to work and I'm lost as to why.

 

My JSON: an array of objects

	[
    {
        "question": "When was the Battle of Hastings?",
        "choices": [
            "966",
            "1166",
            "1066",
            "1266"
        ],
        "answer": "1066"
    },
    {
        "question": "Which English King famously had six wives?",
        "choices": [
            "Richard III",
            "Edward IV",
            "Henry VIII",
            "Henry VII"
        ],
        "answer": "Henry VIII"
    },
    {
        "question": "Which King signed Magna Carta?",
        "choices": [
            "John",
            "Richard I",
            "Henry II",
            "Edward III"
        ],
        "answer": "John"
    },
    {
        "question": "King Henry V won this Battle in 1415?",
        "choices": [
            "Crecy",
            "Agincourt",
            "Anjou",
            "Calais"
        ],
        "answer": "Agincourt"
    },
    {
        "question": "Which King signed Magna Carta?",
        "choices": [
            "John",
            "Richard I",
            "Henry II",
            "Edward III"
        ],
        "answer": "John"
    },
    {
        "question": "Who was assassinated in 44BC?",
        "choices": [
            "Julius Caesar",
            "Nero",
            "Mark Anthony",
            "Hadrian"
        ],
        "answer": "Julius Caesar"
    },
    {
        "question": "Whose tomb did Howard Carter discover in 1922?",
        "choices": [
            "Nefertiti",
            "Tutankhamun",
            "Alexander The Great",
            "Akhenaten"
        ],
        "answer": "Tutankhamun"
    },
    {
        "question": "Who led the Russian Revolution?",
        "choices": [
            "Leon Trotsky",
            "Alexei Rykov",
            "Vladimir Lenin",
            "Joseph Stalin"
        ],
        "answer": "Vladimir Lenin"
    },
    {
        "question": "Who was President during the American Civil War?",
        "choices": [
            "Abraham Lincoln",
            "Andrew Johnson",
            "Ulysses S Grant",
            "James Buchanan"
        ],
        "answer": "Abraham Lincoln"
    }
	]

What I want to do is pull all the questions and choices and display that as HTML page on a page I thought using the Fetch API and its nice lean syntax it would be fairly simple however I cannot do it and need some help.

 

This is my JS:

        const questionBox = document.querySelector('.questionsBox');
        let score; // global variable to keep score
        const getHistQus = fetch('./questions/histqus.json')
            .then(res => res.json())
            .then(data => {
                console.log(data)
                data.map(question => console.log(JSON.stringify(data[question])))
                questionBox.innerHTML = `<p>${question}</p>`;
            })
            // .then(data => data.map(question => console.log(data.question)))
            // .then(questions => {
            //     // console.log(questions);
            //     // questionBox.innerHTML = `<p>${questions}</p>`;1
            // });
            // .then(data => data.map(question => console.log(data.question)))
            // .then(questions => {
            //     console.log(questions)
            //     questionBox.innerHTML = `<p>${questions}</p>`;
            // })

I just keep getting undefined but I have tried some simplier dummy data from jsonplaceholder and it works mine doesn't. Why? Is the format of JSON? Using fetch incorrectly? I have no idea could anyone explain what I am doing wrong?


  • 0

YNWA

 

 





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users