CODEWITHSUNDEEP
javascriptjsonjavascript-objects
Keith Power
Keith Power

Reputation: 14141

correctly loop a ajax returned json object

I am having trouble looping the returned json object now that it is not a simple array.

{
    "ModuleSlides": [
        {
            "content": "\u003Cslide type=\u0022quiz\u0022 answer=\u0022option1\u0022 data-slide-num=\u00221\u0022\u003E\n  \u003Cdiv class=\u0022quiz-wrapper\u0022\u003E\n    \u003Cspan class=\u0022quiz-progress\u0022\u003EQUESTION 4 of 23\u003C\/span\u003E\n    \u003Cspan class=\u0022quiz-question\u0022\u003EWhat is Manual Handling for the sake of this quiz you have to take?\u003C\/span\u003E\n  \u003C\/div\u003E\n\n  \u003Cdiv class=\u0022btn-group\u0022 data-toggle=\u0022buttons\u0022\u003E\n    \u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option1\u0022\u003EOption 1\u003C\/label\u003E\n    \u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option2\u0022\u003EOption 2\u003C\/label\u003E\n    \u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option3\u0022\u003EOption 3\u003C\/label\u003E\n    \u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option3\u0022\u003EOption 4\u003C\/label\u003E\n  \u003C\/div\u003E\n\u003C\/slide\u003E"
        },
        {
            "content": "\u003Cslide type=\u0022quiz\u0022 answer=\u0022option1\u0022 data-slide-num=\u00222\u0022\u003E\n\u003Ch1\u003ECourse title\u003C\/h1\u003E\n\u003Ch2\u003EQuiz question: Choose an answer (1)\u003C\/h2\u003E\n\u003Cdiv class=\u0022btn-group\u0022 data-toggle=\u0022buttons\u0022\u003E\n\u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option1\u0022\u003EOption 1\u003C\/label\u003E\n\u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option2\u0022\u003EOption 2\u003C\/label\u003E\n\u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option3\u0022\u003EOption 3\u003C\/label\u003E\n\u003Clabel class=\u0022btn btn-primary col-xs-12\u0022\u003E\u003Cinput type=\u0022radio\u0022 name=\u0022options\u0022 id=\u0022option3\u0022\u003EOption 4\u003C\/label\u003E\n\u003C\/div\u003E\n\u003C\/slide\u003E"
        }
    ],
    "quizResults": "{\u00221\u0022:\u0022option1\u0022}"
}

I have tried different combinations of returnedSlides.ModuleSlides[i].content but I can't seem to get it right.

for (var i = 0; i < returnedSlides.length; i++) {                  
    $("slides").append(returnedSlides.ModuleSlides[i].content);
};

Upvotes: 0

Views: 49

Answers (2)

Stepashka
Stepashka

Reputation: 2698

The correct code for looping on ModuleSlides

for (var i = 0; i < returnedSlides.ModuleSlides.length; i++) {                  
    $("slides").append(returnedSlides.ModuleSlides[i].content);
};

Alternatively you can do forEach() loop on array elements i.e.

returnedSlides.ModuleSlides.forEach(function(element) {
    $("slides").append(element.content);
})

Upvotes: 0

Kriggs
Kriggs

Reputation: 3778

returnedSlides has no length, it is an Object, you want returnedSlides.ModuleSlides.length.

Upvotes: 4

Related Questions