parse json and output in html

Question

I want to parse a json file and output in html by using javascript

here is my json file

{"quiz":[
    {
        "quizName":"Quiz 1",
        "question": [
            {
                "text": "1+1?",
                "choiceA": "1",
                "choiceB": "2",
            }
        ]
    },
    {
        "quizName":"Quiz 2",
        "question": [
            {
                "text": "2+2?",
                "choiceA": "3",
                "choiceA": "4",
            }
        ]
    }
]}

here is my html

<body>
<div id="placeholder"></div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
  $.getJSON('data.json', function(data) {
    var output="<ul>";
    for (var i in data.quiz) {
        output+="<li>" + data.quiz[i].quizName+"</li>";
    }

    output+="</ul>";
    document.getElementById("placeholder").innerHTML=output;
 });
   </script>
</body>

I want to display all the "quizName" in a list format like this

Quiz 1

Quiz 2

But by code doesn't output anything.

I am new to json and javascript, I don't know whether the json file is not correct or the javascript is not correct. Thanks.

What makes you think that one of those is not correct? What does your JavaScript console say? What happens if you add console.log statements to trace which bits of the code execute? — Quentin
– Quentin, Commented Jul 3, 2014 at 6:20
@shmuli — Nonsense, jQuery is a JavaScript library. All jQuery is JavaScript (although the reverse is not true). — Quentin
– Quentin, Commented Jul 3, 2014 at 6:20
jsonlint.com - Parse error on line 9: Expecting 'STRING' - you have trailing commas which is a Bad Thing — mplungjan
– mplungjan, Commented Jul 3, 2014 at 6:22

user636044 · Accepted Answer · 2014-07-03 06:24:19Z

3

You can't have commas after the last items of an object in a JSON file.

Change:

"choiceB": "2",

To this:

"choiceB": "2"

Do the same for choiceA": "4",

answered Jul 3, 2014 at 6:24

user636044

Sign up to request clarification or add additional context in comments.

2 Comments

user2184612 Over a year ago

I also want to get a list of all question "text", do you know how to write it?

user636044 Over a year ago

I think you could just select it the same way you did data.quiz[i].quizName. Something like data.quiz[i].question.text instead and format it as part of your <li> as you'd like. Though I'm not sure if I understand your question.

mplungjan · Accepted Answer · 2014-07-03 08:21:36Z

1

if u r not sure with the Json is right or wrong you can check here online json Parser or jsonEditor

you have extra commas

this is the correct Json

{"quiz":[
  {
    "quizName":"Quiz 1",
    "question": [
        {
            "text": "1+1?",
            "choiceA": "1",
            "choiceB": "2"
        }
    ]
  },
  {
    "quizName":"Quiz 2",
    "question": [
        {
            "text": "2+2?",
            "choiceA": "3",
            "choiceB": "4"
        }
    ]
  }
]}

ALso parsing it REFER parsing in fiddle

Hope this Helps

edited Jul 3, 2014 at 8:21

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Jul 3, 2014 at 6:35

Sri

1,5053 gold badges18 silver badges36 bronze badges

Comments

Saurav · Accepted Answer · 2014-07-03 06:24:13Z

0

Remove extra commas in your json file at line numbers 9 and 19.

answered Jul 3, 2014 at 6:24

Saurav

613 bronze badges

Comments

Baximilian · Accepted Answer · 2014-07-03 06:34:22Z

0

All you need it's do one more loop..

var output="<ul>";
for (var i in dataset) {
    for (var j in dataset[i])
    {
    output+="<li>" + dataset[i][j].quizName+"</li>";
    }
}

output+="</ul>";
document.getElementById("placeholder").innerHTML=output;

here you go: http://jsfiddle.net/baximilian/qpJjN/

answered Jul 3, 2014 at 6:34

Baximilian

8857 silver badges26 bronze badges

2 Comments

user2184612 Over a year ago

thanks, but also what if I want to display "text" "ChoiceA" and "ChoiceB" for the first quiz, what should I write?

Baximilian Over a year ago

@user2184612 the simplest way to do this you can see on updated fiddle jsfiddle.net/baximilian/qpJjN/2 but you can optimize this.

Collectives™ on Stack Overflow

parse json and output in html

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related