multidimensional object JSON to HTML with jQuery getJSON

Question

I have a task and I just don't know how to get this right. There is the html with a Between this I have to put a form with data from a JSON file. I am allowed to write in a .js file (with jQuery) but not in the json or the html file. I want the output to be a form with ul and li and radio buttons. But I can't even get the questions themselves as an output and don't know what to try anymore

the json file:

[
    {
        id: "cat1", 
        title: "title 1", 
        conditional: false, 
        questions: [
            {id: "q1a", title: "question"},
            {id: "q1b", title: "question"},
            {id: "q1c", title: "question"},
            {id: "q1d", title: "question"},
            {id: "q1e", title: "question"},
            {id: "q1f", title: "question"},
            {id: "q1g", title: "question"}
        ]
    },
    {
        id: "cat2", 
        title: "title 2", 
        conditional: false, 
        questions: [
            {id: "q2a", title: "question"},
            {id: "q2b", title: "question"}
        ]
    },
    {
        id: "cat3", 
        title: "title", 
        conditional: true, 
        questions: [
            {id: "q3a", title: "question"},
            {id: "q3b", title: "question"},
            {id: "q3c", title: "question"},
            {id: "q3d", title: "question"}
        ]
    } 
]

The last category questions must only show when the category is answered yes.

For now I have the .js (jQuery) as:

$.getJSON( "data/questionaire.json", function(data) {
 $.each(data, function(key, category) {
    var ul = $('<ul />');

    $.each(data.categories, function(category,questions) {
        ul.append(  $('<li />', {text: questions.title})  );
    });

    $("div #questionnaire").append(ul);
}); });

The HTML around the div:

<div id="leftPanel">
    <h1>03 Complaints</h1>
    <!-- Questionnaire placeholder -->
    <div id="questionnaire">
</div>

Your JSON is invalid. Have the responsible party fix it first. — Sheepy, Dec 10 '15 at 10:48
Possible duplicate of [Parse JSON in JavaScript?](http://stackoverflow.com/questions/4935632/parse-json-in-javascript) — Sheepy, Dec 10 '15 at 10:50
@Sheepy the OP seems to be parsing the JSON without errors, so it's doubtful that this is a simple JSON validity error. — shennan, Dec 10 '15 at 11:16

shennan · Accepted Answer · 2015-12-10T12:32:52.257

Firstly, your json (if you have copied it verbatim) is not actually valid json, so you are likely unable to parse it properly. Object keys should be wrapped in quotes, like so:

[
    {
        "id": "cat1", 
        "title": "title 1", 
        "conditional": false, 
        "questions": [
            {"id": "q1a", "title": "question"},
            {"id": "q1b", "title": "question"},
            {"id": "q1c", "title": "question"},
            {"id": "q1d", "title": "question"},
            {"id": "q1e", "title": "question"},
            {"id": "q1f", "title": "question"},
            {"id": "q1g", "title": "question"}
        ]
    },
    {
        "id": "cat2", 
        "title": "title 2", 
        "conditional": false, 
        "questions": [
            {"id": "q2a", "title": "question"},
            {"id": "q2b", "title": "question"}
        ]
    },
    {
        "id": "cat3", 
        "title": "title", 
        "conditional": true, 
        "questions": [
            {"id": "q3a", "title": "question"},
            {"id": "q3b", "title": "question"},
            {"id": "q3c", "title": "question"},
            {"id": "q3d", "title": "question"}
        ]
    } 
]

Also, my guess is that data.categories doesn't actually exist in the scope you are currently in. Try this:

$.each(data, function(categoryIndex, category) {
    var ul = $('<ul />');

    $.each(category.questions, function(questionIndex, question) {
        ul.append(  $('<li />', {text: question.title})  );
    });

    $("div #questionnaire").append(ul);
});

I've renamed some of the variables so as to be clearer about where we are in the current iteration.

Here's a working fiddle.

Update

Make sure your script is being run after the DOM has finished loading. You can either do this by putting your script tag just before the ending <body> tag like this:

  <!-- other html above this -->
  <script src="path/to/script.js"></script>
</body>

Or you can wrap your whole script in a jQuery ready method like this:

$( function() {

    /* here's your entire code */

});

Shennan, you are tha bomb! Thanks for the long helping session :) — Ingrid van den Boom, Dec 10 '15 at 12:40

multidimensional object JSON to HTML with jQuery getJSON

1 Answers1