AngularJS 从 json 获取数据

Question

我正在尝试从 Json 数据中获取数据，但它对我不起作用。我不确定我做错了什么。

Angular Ajax API 调用：

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

HTML 数据绑定

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

我想从 json 文件标题、url、横幅等中获取。但我没有从我的 json 文件中获取任何数据。我该怎么做？

Answer 1

您的 JSON 与教程不同，因此您不应期望代码能够正常工作。你需要改变它。你试过了吗？

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

Answer 2

您的 JSON 无效。 deals 的每个成员的buyDealUrl 属性值后面都有一个逗号。最后一个 deals 对象后面还有一个逗号。由于我们没有看到您的代码，因此无法知道这些是否是它无法正常工作的唯一原因，但肯定是这样。

删除这些逗号会给你这个有效的 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
}

Answer 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>