interate through nested json file using ng-repeat not working

Question

So I have a json file with nested elements. This is my json file:

    [
{
    "qid": "1",
    "contester": "0",
    "answer": "0",
    "question": "What are you most likely to do after getting into an argument? ",
    "images": [
        {
            "qid": "1",
            "imageid": "AB100",
            "imgname": "doghug_q1",
            "imgpath": "Images\/Q1\/doghug_q1.jpg"
        },
        {
            "qid": "1",
            "imageid": "AB101",
            "imgname": "eq_q1.jpg",
            "imgpath": "Images\/Q1\/eat_q1.jpg"
        },
        {
            "qid": "1",
            "imageid": "AB102",
            "imgname": "headache_q1",
            "imgpath": "Images\/Q1\/headache_q1.jpg"
        },
        {
            "qid": "1",
            "imageid": "AB106",
            "imgname": "scream_q1.jpg",
            "imgpath": "Images\/Q1\/scream_q1.jpg"
        },
        {
            "qid": "1",
            "imageid": "AB107",
            "imgname": "shopping_q1",
            "imgpath": "Images\/Q1\/shopping_q1.jpg"
        },
        {
            "qid": "1",
            "imageid": "AB108",
            "imgname": "walkAlone_q1",
            "imgpath": "Images\/Q1\/walkAlone_q1.jpg"
        }
    ]
},
{
    "qid": "2",
    "contester": "0",
    "answer": "0",
    "question": "Which game would you rather play?",
    "images": [
        {
            "qid": "2",
            "imageid": "AB105",
            "imgname": "charades_q2.jpg",
            "imgpath": "Images\/Q2\/charades_q2.jpg"
        },
        {
            "qid": "2",
            "imageid": "AB109",
            "imgname": "playingCards_q2.jpg",
            "imgpath": "Images\/Q2\/playingCards_q2.jpg"
        },
        {
            "qid": "2",
            "imageid": "AB110",
            "imgname": "chess_q2",
            "imgpath": "Images\/Q2\/chess_q2.jpg"
        },
        {
            "qid": "2",
            "imageid": "AB111",
            "imgname": "twister_q2",
            "imgpath": "Images\/Q2\/twister_q2.jpg"
        }
    ]
}

]

And this is my controller that i used to access the json :

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

   app.controller('ListCtrl', ['$scope', '$http', 
  function($scope, $http) {
    $http.get('results.json').success(function(data) {
        $scope.questions = data; // get data from json
          angular.forEach($scope.questions, function(item){
               console.log(item.images);  
           })
        });


    });

  }
]);

And then my html code to display the questions and each questions list of images using the ng-repeat :

        <body ng-app="myApp" >
          <div ng-controller="ListCtrl">
           <ul>
              <li ng-repeat="question in questions"> {{question.qid}} </li>
          </ul>
         </div>
       </body>

As of now iam trying to display the questions id from the json file as a list however the output im getting is a:

{{question.qid}}

as the output in my html page.. Can someone please help me. I dont know what im doing wrong.

yes i missed that out. I have added the var app = as you mentioned but the code still doesnt work .. — Shayuh, Oct 26 '16 at 09:06

Vassilis Pits · Answer 1 · 2016-10-26T09:10:45.020

0

You haven's define the app so you should change the first line of your code to this and check your closing tags on your js code...:

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

app.controller('ListCtrl', ['$scope', '$http', 
function($scope, $http) {

    $scope.questions = [];

    $http.get('results.json').success(function(data) {

        $scope.questions = data; // get data from json

        angular.forEach($scope.questions, function(item){
            console.log(item.images);  
        })

    });
}

]);

edited Oct 26 '16 at 09:10

answered Oct 26 '16 at 08:59

Vassilis Pits

3,788
4
33
48

Still doesnt seem to be working.. the question ids from the json doesnt show up in the html – Shayuh Oct 26 '16 at 09:09
Yes!! I get a: Uncaught ReferenceError: angular is not defined at http://localhost:8012/questionnaire.php:112:11 ... this is where my :
{{question.qid}}

Shayuh

Oct 26 '16 at 09:17

Did import angular to your project through a cdn or somewhere? Please update your question with your full HTML code. – Vassilis Pits Oct 26 '16 at 09:23

Mandeep Singh · Answer 2 · 2016-10-26T09:34:53.603

Complete working code for your case :

HTML

    <!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <div ng-controller="ListCtrl">
      <ul>
        <li ng-repeat="question in questions"> {{question.qid}} </li>
      </ul>
    </div>

  </body>

</html>

JS

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

 app.controller('ListCtrl',function ($scope,$http) {
   $http.get('data.json').success(function(data) {
        $scope.questions = data; // get data from json
    });
 });

Working Plunker

It is working !! Try once !!

score 0 · Answer 3 · answered Oct 26 '16 at 09:06

0

First define app

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

Then initiate your $scope.questions on your controller like

$scope.questions = [];

Also you might need to parse your data with

$scope.questions = JSON.parse(data);

answered Oct 26 '16 at 09:06

taguenizy

2,140
1
8
26

I have done the changes you have mentioned. but it still doesnt seem to be working :/ – Shayuh Oct 26 '16 at 09:13
@Y.Hewa could you provide a fiddle or something similar? – taguenizy Oct 26 '16 at 09:22

score 0 · Accepted Answer · answered Oct 26 '16 at 09:19

your code has some missing things.

Here is working example of your code

http://plnkr.co/edit/FvD26TYZ9v8TbgUBUzN2?p=preview

firstly,

var app = angular.module('myApp', []); //variable app is missing.

secondly, data you mention has missing closing square brace.

interate through nested json file using ng-repeat not working

4 Answers4