accessing nested json in angular and display in php

Question

I have a Json page like this :

    [{
       "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 my controller code is this :

    var app = angular.module('myApp', []);
    app.controller('ListCtrl', ['$scope', '$http', function($scope, $http) {
        $http.get('results.json').success(function(data) {
  
            $scope.questions = []; 

            angular.forEach(data, function(question) {
                  $scope.questions.push(question)

             });

           $scope.images=[];// get data from json
           angular.forEach($scope.questions, function(sorg) {
                   angular.forEach(sorg.images, function(image) {
                        $scope.images.push(image)

                    });
           });

          console.log($scope.images);
       });
   }]);

And in order to display the relevant question and its answer images the html is as follows :

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

However the output shows this :

What are you most likely to do after getting into an argument?
Which game would you rather play?

Images/Q1/doghug_q1.jpg Images/Q1/eat_q1.jpg Images/Q1/headache_q1.jpg Images/Q1/scream_q1.jpg Images/Q1/shopping_q1.jpg Images/Q1/walkAlone_q1.jpg Images/Q2/charades_q2.jpg Images/Q2/playingCards_q2.jpg Images/Q2/chess_q2.jpg Images/Q2/twister_q2.jpg

but i want the output to be like this :

What are you most likely to do after getting into an argument?

Images/Q1/doghug_q1.jpg Images/Q1/eat_q1.jpg Images/Q1/headache_q1.jpg Images/Q1/scream_q1.jpg Images/Q1/shopping_q1.jpg Images/Q1/walkAlone_q1.jpg
Which game would you rather play?

Images/Q2/charades_q2.jpg Images/Q2/playingCards_q2.jpg Images/Q2/chess_q2.jpg Images/Q2/twister_q2.jpg

So basically i want the images for question two to show up below question 2 and the ones for question 1 below question one. However the code doesnt seem to be working the way i want it to because it shows all the questions first and then all the image answers in the end. Is their any way of fixing this? Am I using ng-repeat in the wrong way? please help ..

BrTkCa · Accepted Answer · 2016-10-26 12:20:22Z

1

You don't need the array images for this, because images are inside questions, then you can to do:

angular.forEach(data, function(question) {
      $scope.questions.push(question);
});

HTML:

 <ul>
    <li ng-repeat="question in questions"> {{question.qid}}. {{question.question}} 
        <div ng-repeat="image in question.images"> {{image.imgpath}}  </div>
    </li>
 </ul>

And remove this block:

$scope.images=[];// get data from json
angular.forEach($scope.questions, function(sorg) {
     angular.forEach(sorg.images, function(image) {
          $scope.images.push(image)
     });
 });

Plunker

edited Oct 26, 2016 at 12:20

answered Oct 26, 2016 at 11:24

BrTkCa

4,7894 gold badges28 silver badges46 bronze badges

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

3 Comments

Shayuh Over a year ago

Yes i did try that however, then only the questions appear. The next <li> </li> for the images does not show image paths at all ..

Shayuh Over a year ago

This will show only the questions. No images. Here's the [plunker] (plnkr.co/edit/UQk5i8LJlE3jSC0ISJSP?p=preview)

Shayuh Over a year ago

Thankyou!! finally worked ^.^ link

Andrew Paramoshkin · Accepted Answer · 2016-10-26 12:23:34Z

0

JS

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;
   });
}]);

HTML

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

edited Oct 26, 2016 at 12:23

answered Oct 26, 2016 at 11:29

Andrew Paramoshkin

9896 silver badges15 bronze badges

2 Comments

Shayuh Over a year ago

I tried this doesnt seem to be working. Here's the plunker for your suggestion. link

Andrew Paramoshkin Over a year ago

@Y.Hewa i found an error, by the way, you request results.json, but you have result.json

Shubham Sharma · Accepted Answer · 2016-10-26 13:32:45Z

0

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">


<div ng-repeat="x in records">
  <b>{{x.question}}</b><br><br>

  <div ng-repeat="y in x.images">{{y.imgpath}}<br><br></div>
</div>


<script>
var app = angular.module("myApp", []);
app.controller("myCtrl",['$scope','$http', function($scope,$http) {

    $http.get("result.json")
  .then(function(response) {
      $scope.records = response.data;
  }, function(response) {
      $scope.records = "Something went wrong";
  });

}]);
</script>

</body>
</html>

edited Oct 26, 2016 at 13:32

answered Oct 26, 2016 at 11:51

Shubham Sharma

3154 silver badges18 bronze badges

4 Comments

Yaron Idan Over a year ago

Please explain the solution you offer and how to use it.

Shubham Sharma Over a year ago

Just copy and paste the full code in plain HTML file and run it.

Shayuh Over a year ago

This works if the json is embedded in the script. However, when i try to change it to read external .json file it does not work..

Shubham Sharma Over a year ago

It works fine even if we work with externel json file

Collectives™ on Stack Overflow

accessing nested json in angular and display in php

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related