Display json data in Angular.js

Question

I am using the below code, I only get Question Ids, but what I need is when I click Save button I want to display questions.id, option.id and selected : true or false below the textbox. Below code is correct but want to make it as like array.

controllers.js

 $scope.save = function() {
        $scope.msg = 'Question IDs:';
        $scope.questions.forEach(function(el){
            console.log(el)
            $scope.msg += el.Id + ',';
        })
 }

in $scope.questions all the json data is stored.

home.html

<div ng-repeat="question in filteredQuestions">
            <div class="label label-warning">Question {{currentPage}} of {{totalItems}}.</div>
            <div class="row">
                <div class="row">
                    <h3>{{currentPage}}. <span ng-bind-html="question.Name"></span></h3>
                </div>
            </div>
            <div class="row text-left options">
                <div class="col-md-6" ng-repeat="option in question.Options" style="float:right;">
                    <div class="option">
                        <label class="" for="{{option.Id}}">
                           <h4> <input id="{{option.Id}}" type="checkbox" ng-model="option.Selected" ng-change="onSelect(question, option);" />
                            {{option.Name}}</h4>
                        </label>
                    </div>
                </div>
                </div>

            <div class="center"><button ng-click="save()">Save</button></div>
            <div class="center"><textarea  rows="5" cols="50">{{msg}}</textarea></div>
        </div>

csharp.js

{
    "quiz": {
        "Id": 2,
        "name": "C# and .Net Framework",
        "description": "C# and .Net Quiz (contains C#, .Net Framework, Linq, etc.)",
        "paragraph": "In 2015 Microsoft released ASP.NET 5.ASP.NET 5 is a significant redesign of ASP.NET.ASP.NET, MVC, and Web Pages are now merged into a single framework named MVC 6.It includes the following features:Linux support OSX support Node.js supportA ngularJS supportTag ,HelpersView, ComponentsWeb ,APIGruntJS ,supportBower, supportNo ,Visual BasicNo Web Forms"
    },
    "config": {
        "shuffleQuestions": true,
        "showPager": false,
        "allowBack": true,
        "autoMove": false
    },
    "questions": [{
        "Id": 1010,
        "Name": "Which of the following assemblies can be stored in Global Assembly Cache?",
        "QuestionTypeId": 1,
        "Options": [{
            "Id": 1055,
            "QuestionId": 1010,
            "Name": "Private Assemblies"
        }, {
            "Id": 1056,
            "QuestionId": 1010,
            "Name": "Friend Assemblies"
        }, {
            "Id": 1057,
            "QuestionId": 1010,
            "Name": "Public Assemblies"
        }, {
            "Id": 1058,
            "QuestionId": 1010,
            "Name": "Shared Assemblies"
        }]
    }, {
        "Id": 1019,
        "Name": "Which of the following does NOT represent Integer?",
        "QuestionTypeId": 1,
        "Options": [{
            "Id": 1055,
            "QuestionId": 1010,
            "Name": "Char"
        }, {
            "Id": 1056,
            "QuestionId": 1010,
            "Name": "Byte"
        }, {
            "Id": 1057,
            "QuestionId": 1010,
            "Name": "Short"
        }, {
            "Id": 1058,
            "QuestionId": 1010,
            "Name": "Long"
        }]

    }]
}

M. Junaid Salaat · Accepted Answer · 2016-03-31 12:00:34Z

0

Use this code in your controller to have the question id the selected option id and non selected options id.

$scope.save = function() {
  console.log('Question IDs:' + question.id);
  $scope.questions.Options.forEach(function(option){
        if(option.selected){
           console.log('Selected Options:' +option.id)
           $scope.msg = 'Question IDs: ' + question.id + ', Selected option id: ' + option.id;
        }
        else{
           console.log('Not selected Options:' +option.id)
        }
  })
}

Hope it helps

edited Mar 31, 2016 at 12:00

answered Mar 31, 2016 at 11:44

M. Junaid Salaat

3,8031 gold badge25 silver badges27 bronze badges

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

3 Comments

Sherin Over a year ago

get an error like Uncaught SyntaxError: missing ) after argument list

M. Junaid Salaat Over a year ago

@Sherin I'm Sorry. Forgot to add the operator to concat + in consoles. Try again please.

Sherin Over a year ago

yes I find that and we need to call question before using console.log(question.id). But the question Id is already in option.So I used to call option.QuestionId but it give me error like "cannot read property foreach".whats the error here..?? @mJunaidSalaat

Sjoerd de Wit · Accepted Answer · 2016-03-31 11:17:56Z

0

You can pass the entire object to your function like this:

<div ng-repeat="question in filteredQuestions">
        <div class="label label-warning">Question {{currentPage}} of {{totalItems}}.</div>
        <div class="row">
            <div class="row">
                <h3>{{currentPage}}. <span ng-bind-html="question.Name"></span></h3>
            </div>
        </div>
        <div class="row text-left options">
            <div class="col-md-6" ng-repeat="option in question.Options" style="float:right;">
                <div class="option">
                    <label class="" for="{{option.Id}}">
                       <h4> <input id="{{option.Id}}" type="checkbox" ng-model="option.Selected" ng-change="onSelect(question, option);" />
                        {{option.Name}}</h4>
                    </label>
                </div>
            </div>
            </div>

        <div class="center"><button ng-click="save(question, option)">Save</button></div>
        <div class="center"><textarea  rows="5" cols="50">{{msg}}</textarea></div>
    </div>

And log them in javascript with this:

 $scope.save = function(question, option) {
    $scope.msg = 'Question IDs:';
    console.log(question + ':' + option) 
 }

answered Mar 31, 2016 at 11:17

Sjoerd de Wit

2,4135 gold badges28 silver badges47 bronze badges

1 Comment

Sherin Over a year ago

But here i need to display Question Id And selected options id.if any answer is selected include selected:true otherwise selected:false. @Sjoerddewit

Collectives™ on Stack Overflow

Display json data in Angular.js

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related