AngularJS get data from json

问题

I'm trying to get from Json data but it doesn't worked for me. I'm not sure what I'm doing wrong.

Angular Ajax API call :

<script>
    function PostsCtrlAjax($scope, $http) {
        $http({
            method: 'POST',
            url: 'js/posts.json'
        }).success(function(data) {
            $scope.posts = data.deals;; // response data 
        });
    }
</script>

HTML Data Binding

<div id="ng-app" ng-app ng-controller="PostsCtrlAjax">
    <div ng-repeat="post in posts">
         <h2>
    <a href='{{post.url}}'>{{post.title}}</a>
    </h2>

        <div class='time'>{{post.time}} - {{post.author}}</div>
        <p>{{post.description}}</p>
        <img ng-src="{{post.banner}}" />
    </div>
</div>

Posts.json:

{
   "result":"SUCCESS",
   "resultMessage":"",
   "deals":[
      {
         "title":"Multiple Ajax Image Upload without Refreshing Page using Jquery.",
         "url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html",
         "banner":"https://lh5.googleusercontent.com/-VWIAbbjR1QM/Uf_v9v9LCbI/AAAAAAAAIAo/4ZhYhP3lcCg/s550/multiple.jpg",
         "description":"Today I am presenting the most important social networking feature called multiple ajax image upload without refreshing the page using jquery and PHP. We just modified few lines of code in jqery.form.js plugin and renamed that to jquery.wallform.js. This feature is one of the key feature in Wall Script sale, big thanks to Arun Sekar for this code trick.",
         "time":"Tuesday, August 6, 2013",
         "author":"Srinivas Tamada"
      },
      {
         "title":"Wall Script 6.0",
         "url":"http://www.9lessons.info/2013/07/wall-script.html",
         "banner":"https://lh5.googleusercontent.com/-ErPa0tEQgLs/UfZzaQ3NcFI/AAAAAAAAH7o/h_KH8Rf4AXs/s550/WallBanner.jpg",
         "description":"Introducing the brand new Wall Script 6.0 with enrich social network features. Exactly year later I did released Wall Script previous version, it got awesome response and outstanding sale. This script IDEA was came out from my imagination, introducing powerful features like Conversations, OEmebd URL expanding system, Like/Share and Multiple image slider.",
         "time":"MONDAY, JULY 29, 2013",
         "author":"Srinivas Tamada"
      }
   ],
   "total":1207
}

I want get from json file title, url, banner etc. But I didn't get any data from my json file. How can i do that?

回答1:

Your JSON isn't the same as the tutorial, so, you shouldn't expect the code to work. You need to change it. Did you try this?

<script>
  function PostsCtrlAjax($scope, $http) {
    $http({method: 'POST', url: 'js/posts.json'}).success(function(data) {
      $scope.posts = data.deals; // response data 
    });
  }
</script>

回答2:

Your JSON is not valid. You have a trailing comma after the value of the buyDealUrl property for each member of deals. You also have a trailing comma after the last deals object. Since we haven't seen your code, it's impossible to know if those are the only reasons that it's not working, but that could certainly be it.

Removing those commas gives you this, valid JSON:

{
    "result": "SUCCESS",
    "resultMessage": "",
    "deals": [
        {
            "id": "1001878",
            "title": "Cotton candy muffin danish applicake. Pie jujubes icing sesame snaps marshmallow tart. ",
            "description": "Halvah candy canes chupa chups toffee dessert jujubes wafer pie marshmallow.",
            "howToUse": null,
            "city": "",
            "provider": "Yelp",
            "realPriceWithSymbol": "530 EURO",
            "dealPriceWithSymbol": "199 EURO",
            "buyDealUrl": "http://www.example.com.com/satin-al/1001878/"
        },
        {
            "id": "100343",
            "title": "Cotton candy muffin danish applicake. Pie jujubes icing sesame snaps marshmallow tart. ",
            "description": "Halvah candy canes chupa chups toffee dessert jujubes wafer pie marshmallow.",
            "howToUse": null,
            "city": "",
            "provider": "Yelp",
            "realPriceWithSymbol": "530 EURO",
            "dealPriceWithSymbol": "199 EURO",
            "buyDealUrl": "http://www.example.com.com/satin-al/100343"
        }
    ],
    "total": 1207
}

回答3:

<script>
  function PostsCtrlAjax($scope, $http) {
    $http({method: 'POST', url: 'js/posts.json', dataType:"json", contentType:"application/json; charset=utf-8"}).then(function successCallback(data) {
      $scope.posts = data.data.deals; // response data 
    });
  }
</script>

来源：https://stackoverflow.com/questions/25080331/angularjs-get-data-from-json