ng-repeatを使用してネストされたjsonファイルを介して介入する

したがって、ネストされた要素を持つjsonファイルがあります。これは私のJSONファイルです：ng-repeatを使用してネストされたjsonファイルを介して介入する

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

現在のところ私は質問を表示しようとしていますリストとしてJSONファイルをmはしかし、取得した出力イムは、次のとおりです。

{{question.qid}} ..誰かが私を助けてください、私のhtmlページで出力として

。私は間違って何をしているのかわかりません。

出典

2016-10-26 Shayuh

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

'app.controller（/ * ... * /）'ここで 'app'はどこに定義されていますか？ – taguenizy

はい私はそれを逃した。あなたが言いましたように、私はvar app =を追加しましたが、コードはまだ動作しません。 – Shayuh

で解析する必要がある場合がありますように、あなたのコントローラ上のもの。ここで

はあなたのコードの作業例まず

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

あなたの避難所のようにあなたが...これにあなたのコードの最初の行を変更し、あなたのJSコードであなたの終了タグを確認する必要がありappを定義します。あなたのJavascriptで

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の質問idsがhtmlに表示されません – Shayuh

コンソールにエラーがありますか？ –

ルックを最初に！終了タグは正しくありません。これであなたのJSを置き換え：また

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

]);

をご引っ張っJSONので、これに探して、あなたの地域のそれの価値から："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>

それが働いている Plunker

の作業

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

!!一度お試しください！

出典

2016-10-26 09:04:05

まずapp

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

が開始定義あなた$scope.questionsまた

$scope.questions = [];

あなたのコードは、いくつかが欠けているあなたのdata

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

出典

2016-10-26 09:06:14 taguenizy

私はあなたが言及した変更を行った。それでも動作していないようです：/ – Shayuh

@ Y.Hewaあなたはフィドルなどを提供することができますか？ – taguenizy

ng-repeatを使用してネストされたjsonファイルを介して介入する

答えて

関連する問題