ng-repeat not working with Objects of Objects

Question

I have data in my object of objects but ng-repeat is not showing me anything my data is json Format like:

     {
      "0": [
        {
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
{
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
        {
          "key": "Survey Meta Data"
        }
      ],
      "1": [
        {
          "question": "When are New Assessment Notices sent out?",
          "id": 2,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 1
        },
        {
          "key": "Assessment"
        }
      ]
    }

and I want to display all question and key how can I achieve this I am trying something like this:

<div class="form-group" ng-repeat="data in viewQuestions">
                   <div  ng-repeat="values[$index] in data ">
                   <label for="comment">{{values.questions}}</label>
                   </div>
                   <label for="comment">{{data.key}}</label>
                  <textarea class="form-control" rows="2" id="comment"></textarea>
                  </div>

I want to see the questions first and then key something like this: — Kumail Hussain
– Kumail Hussain, Commented Jul 3, 2017 at 6:12
Question: How often is real property re-assessed (or revalued)? Question: "How often is real property re-assessed (or revalued)? Key: Survey meta data Question: When are New Assessment Notices sent out Key: Assessment — Kumail Hussain
– Kumail Hussain, Commented Jul 3, 2017 at 6:13

Sachila Ranawaka · Accepted Answer · 2017-07-03 06:14:00Z

remove the $index in your ng-repeat.

also, change the {{values.questions}} to {{values.question}}

<div class="form-group" ng-repeat="data in viewQuestions">
   <div  ng-repeat="values in data "> 
      <label >{{values.question}}</label>
   </div>
   <label for="comment">{{data.key}}</label>
   <textarea class="form-control" rows="2" id="comment"></textarea>
</div>

Demo

angular.module("app",[])
.controller("ctrl",function($scope){
  $scope.viewQuestions = {
      "0": [
        {
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
{
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
        {
          "key": "Survey Meta Data"
        }
      ],
      "1": [
        {
          "question": "When are New Assessment Notices sent out?",
          "id": 2,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 1
        },
        {
          "key": "Assessment"
        }
      ]
    }

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <div class="form-group" ng-repeat="data in viewQuestions"> 
                   <div  ng-repeat="values in data "> 
                   <label >{{values.question}}</label>
                   </div>
                   <label for="comment">{{data.key}}</label>
                  <textarea class="form-control" rows="2" id="comment"></textarea>
                  </div>
</div>

Sajeetharan · Accepted Answer · 2017-07-03 06:19:49Z

Proably you need this,

<div class="form-group" ng-repeat="(key,value) in viewQuestions  track by $index">
  <div  ng-repeat="values in value ">
   <label for="comment">{{values.question}}</label>
   <label for="comment">{{values.key}}</label>
   <textarea class="form-control" rows="2" id="comment"></textarea>
 </div>
</div>

DEMO

var pegasusWebApp = angular.module('ReqWebApp', [])

pegasusWebApp.controller('ReqAppController', function ReqAppController($scope) {
    $scope.viewQuestions = {
  "0": [
    {
      "question": "How often is real property re-assessed (or revalued)?",
      "id": 1,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 0
    },
    {
      "question": "How often is real property re-assessed (or revalued)?",
      "id": 1,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 0
    },
    {
      "key": "Survey Meta Data"
    }
  ],
  "1": [
    {
      "question": "When are New Assessment Notices sent out?",
      "id": 2,
      "section": "Assessment",
      "sectionId": 2,
      "check": true,
      "index": 1
    },
    {
      "key": "Assessment"
    }
  ]
};
});

<!DOCTYPE html>
<html ng-app="ReqWebApp">
<head>
    <meta charset="UTF-8">
    <title>New Request</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="ReqAppController">
    <div class="form-group" ng-repeat="(key,value) in viewQuestions  track by $index">
        <div ng-repeat="values in value ">
            <label for="comment">{{values.question}}</label>
            <label for="comment">{{values.key}}</label>
            <textarea class="form-control" rows="2" id="comment"></textarea>
        </div>
    </div>
</body>
</html>

Mohideen bin Mohammed · Accepted Answer · 2017-07-03 06:26:41Z

angular.module("Myapp",[])
.controller("Myctrl",function($scope){
$scope.viewQuestions = {
      "0": [
        {
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
{
          "question": "How often is real property re-assessed (or revalued)?",
          "id": 1,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 0
        },
        {
          "key": "Survey Meta Data"
        }
      ],
      "1": [
        {
          "question": "When are New Assessment Notices sent out?",
          "id": 2,
          "section": "Assessment",
          "sectionId": 2,
          "check": true,
          "index": 1
        },
        {
          "key": "Assessment"
        }
      ]
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <div ng-app="Myapp" ng-controller="Myctrl">
  <div class="form-group" ng-repeat="(key,val) in viewQuestions  track by $index">
    <div  ng-repeat="v in val ">
        <label for="comment">{{v.question}}</label>
    </div>
    <label for="comment">{{val.key}}</label>
    <textarea class="form-control" rows="2" id="comment">       </textarea>
  </div>
  </div>

Jayant Patil · Accepted Answer · 2017-07-03 07:54:47Z

Here is the JsFiddle link

HTML

    <div ng-app="myApp">

      <div ng-controller="ctrl">
        <div ng-repeat="obj in data">
          <div ng-repeat="item in obj">
            <label ng-if="item.question">Question:{{item.question}}</label>
            <label ng-if="item.key">Key: {{item.key}}</label>
            <br>
            <textarea ng-if="item.key" class="form-control" rows="2" id="comment">
            </textarea>
            <hr>
          </div>

        </div>
      </div>
    </div>

JS Code

  var app = angular.module('myApp', []);

  app.controller('ctrl', function($scope) {
    $scope.data = {
      "0": [{
        "question": "How often is real property re-assessed (or revalued)?",
        "id": 1,
        "section": "Assessment",
        "sectionId": 2,
        "check": true,
        "index": 0
      }, {
        "question": "How often is real property re-assessed (or revalued)?",
        "id": 2,
        "section": "Assessment",
        "sectionId": 2,
        "check": true,
        "index": 0
      }, {
        "key": "Survey Meta Data"
      }],
      "1": [{
        "question": "When are New Assessment Notices sent out?",
        "id": 2,
        "section": "Assessment",
        "sectionId": 2,
        "check": true,
        "index": 1
      }, {
        "key": "Assessment"
      }]
    };
  });

This will print out as you want.

Collectives™ on Stack Overflow

ng-repeat not working with Objects of Objects

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related