通過嵌套的json文件使用ng-repeat不起作用

因此我有一個帶有嵌套元素的json文件。這是我的JSON文件：通過嵌套的json文件使用ng-repeat不起作用

[ 
{ 
    "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" 
     } 
    ] 
}

]

這是我的控制器，我曾經訪問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); 
      }) 
     }); 


    }); 

    } 
]);

然後我的HTML代碼來顯示的問題和每個問題使用ng-repeat的圖像列表：

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

截至目前，iam試圖顯示問題ID爲來回米JSON文件列表但輸出即時得到是：

{{question.qid}}

在我的html頁面的輸出。可有人請幫助我。我不知道我做錯了什麼。

來源

2016-10-26 Shayuh

'var app = angular.module（'myApp'，[]）;'？ – taguenizy

'app.controller（/ * ... * /）'app'定義在哪裏？ – taguenizy

是的，我錯過了。我已經添加了var app =正如你所提到的，但代碼仍然不起作用。 – Shayuh

你的代碼有一些失蹤的$scope.questions的東西。

這裏是工作示例代碼

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

首先的，

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

其次，你提到的數據丟失右方括號。

來源

2016-10-26 09:19:36

THANKYOU！這工作。 :) – Shayuh

雷礦工也將工作 –

是謝謝你們！ – Shayuh

您避風港的定義app所以你應該代碼的第一行改變這一點，並檢查你的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; // get data from json 

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

    }); 
} 

]);

來源

2016-10-26 08:59:54

啊是的！我現在修好了，但它似乎仍然工作.. – Shayuh

仍然似乎沒有工作..從JSON的問題ID不會出現在HTML – Shayuh

你有任何控制檯中的錯誤？ –

看看你的Javascript第一！結束標記不正確。因爲你拉的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); 
     }) 
    }); 
} 

]);

另外：這個替換您的JS "Cross origin requests are only supported for HTTP." error when loading a local file

來源

2016-10-26 09:03:35 Jack

爲你的情況完整的工作代碼：

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>

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

工作Plunker

這是工作！嘗試一次！

來源

2016-10-26 09:04:05

首先定義app

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

然後開始你的控制器一樣

$scope.questions = [];

你也可能需要分析你data與

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

來源

2016-10-26 09:06:14 taguenizy

我已經完成了您提到的更改。但它似乎仍然沒有工作：/ – Shayuh

@ Y.Hewa你能提供一個小提琴或類似的東西嗎？ – taguenizy

通過嵌套的json文件使用ng-repeat不起作用

回答

相關問題