AngularJSを使用したJSONオブジェクトへのアクセスと表示

JSONのオブジェクトにAngularJSでアクセスして値を表示しようとしています。私はJSONで配列を作成するときにこれを行いましたが、今回はオブジェクトを使って例を示したいと思います。これは私のコードです：AngularJSを使用したJSONオブジェクトへのアクセスと表示

私のJSONファイル

{ "user": { 
"Name":"Ben", 
"City":"New York"}}

マイ角度アプリ

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

    app.controller('jsonObjectExample', function($scope, $http) { 
     $http.get("jsonobject.json").then(function (response) { 
      $scope.myData = response.data.user; 
     }); 
    });

は私のHTMLここ

<body> 
    <div ng-app="myApp" ng-controller="jsonObjectExample"> 
     <ul> 
     <li ng-repeat="x in myData"> 
      {{ x.Name + ', ' + x.City }} 
     </li> 
     </ul> 
    </div> 
    </body>

はplunker上のこれらのファイルへのリンクです：https://plnkr.co/edit/uBRf99AjYH9zX0WuHsW3?p=preview

誰かが私がどこに間違っているのか説明できますか？ありがとう。

出典

2017-05-03 user3305894

更新されたplunkrを確認してくださいhttps://plnkr.co/edit/a2czVDmeW0asDS7p5COk?p=preview – CrazyMac

オブジェクトではなく配列にしますか？私は例としてオブジェクトにアクセスしたい。 – user3305894

jsonobject.jsonからの応答はオブジェクトであり、配列ではありません。したがって、HTMLでこの方法でオブジェクトにアクセスする必要があります。応答が配列の場合は、反復にng-repeatを使用できます – CrazyMac

ng-repeatを削除します。 myDataはオブジェクトではなく、配列あなたが解析しているJSONは、いくつかの配列値を与えるべきであることを確認しますngのリピートを使用している場合ng-repeat

<body> 
    <div ng-app="myApp" ng-controller="jsonObjectExample"> 
     <ul> 
     <li > 
      {{ myData.Name + ', ' + myData.City }} 
     </li> 
     </ul> 
    </div> 
    </body>

Demo

出典

2017-05-03 04:47:22

ありがとう、ありがとうございます。 – user3305894

@ user3305894この問題が解決した場合は、 –

を使用するので、不要です。

ようにあなたがあなたのJSONを修正することができます。

{ "user": [{ 
"Name":"Ben", 
"City":"New York"}]}

その他のコードが正常に動作しています。確認してくださいthis

出典

2017-05-03 05:02:43

AngularJSを使用したJSONオブジェクトへのアクセスと表示

答えて

関連する問題