How to loop this particular json object array

Question

I have created a JSON object which I want to display in a div: question and number of selections-format.

How to loop i.e. iterate this particular JSON object array in div?

[
    {
        "question": "php Developer ?",
        "type": "checkbox",
        "mandatory": "yes",
        "answer": [
            "a",
            "b",
            "c",
            "d"
        ],
        "answerss": [
            "a",
            "b",
            "c",
            "d"
        ]
    },
    {
        "question": "1+1",
        "type": "radio",
        "mandatory": "no",
        "answer": [
            "1",
            "2",
            "3",
            "4"
        ],
        "answerss": [
            "1",
            "2",
            "3",
            "4"
        ]
    }
]

like

Question
answer 1
answer 2
answer 3
answer 4

Please show us what you have tried so far. Stack Overflow is not a code writing service, but people are willing to help you if you at least try to solve the problem at your own. Please see also How to create a Minimal, Complete, and Verifiable example and How do I ask a good question?. — Martin Nyolt
– Martin Nyolt, Commented Sep 2, 2016 at 13:35

Community · Accepted Answer · 2017-05-23 10:33:48Z

0

You need use javascript . You are using angular js ? if not .. Visit this link probably help you How do I dynamically populate html elements with JSON Data with Javascript not jQuery?

edited May 23, 2017 at 10:33

CommunityBot

11 silver badge

answered Sep 2, 2016 at 11:10

Alvaro Heras

818 bronze badges

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

Comments

Vaibhav Shah · Accepted Answer · 2016-09-02 12:04:00Z

0

Angular Js

You can achieve this using ng-repeat directive like -

<div ng-controller="MyCtrl">
  <div ng-repeat="question in questions">
      <div class="preview">Question - {{question.question}} </div>
         <div ng-repeat="answer in question.answerss">
           {{answer}}
         </div>
   </div>
</div>

Working jsfiddle - https://jsfiddle.net/z800015w/

Jquery

With Jquery you need to update innerHTML of the div by using following code -

$.each(questions, function(index, question){
    var newItem = "<div> Q - "+ question.question + "<div></br>Answer - </br>";
    $.each(question.answerss, function(index2, answer){
    newItem = newItem + answer+"</br>";
    });
    inHTML = inHTML + newItem+"</br>";  
});

Please find demo - https://jsfiddle.net/umd7nnhu/2/

edited Sep 2, 2016 at 12:04

answered Sep 2, 2016 at 11:23

Vaibhav Shah

5283 silver badges17 bronze badges

1 Comment

Sam Over a year ago

is it not possible with jquery. because for angular js to work , i will be required to include one more angularjs library .and it will increase loading time .

Collectives™ on Stack Overflow

How to loop this particular json object array

2 Answers 2

Comments

Angular Js

Jquery

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Angular Js

Jquery

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related