Y.Hewa Y.Hewa - 1 month ago 9
Javascript Question

accessing nested json in angular and display in php

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 :


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

  2. 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 :


  1. 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

  2. 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 ..

Answer

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

Comments