AngularJS 从 json 获取数据 [英] AngularJS get data from json

问题描述

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

Angular Ajax API 调用:

HTML 数据绑定

<div ng-repeat="post in post"><h2><a href='{{post.url}}'>{{post.title}}</a><div class='time'>{{post.time}} - {{post.author}}</div><p>{{post.description}}</p><img ng-src="{{post.banner}}"/>

Posts.json:

<代码>{"result":"成功","resultMessage":"",交易":[{"title":"使用 Jquery 上传多个 Ajax 图像而不刷新页面.","url":"http://www.9lessons.info/2013/08/multiple-ajax-image-upload-refreshing.html","横幅":"https://lh5.googleusercontent.com/-VWIAbbjR1QM/Uf_v9v9LCbI/AAAAAAAAIAo/4ZhYhP3lcCg/s550/multiple.jpg","description":"今天我要介绍最重要的社交网络功能，称为多ajax图像上传，无需使用jquery和PHP刷新页面.我们只是修改了jqery.form.js插件中的几行代码并将其重命名为jquery.wallform.js.此功能是 Wall Script 销售的主要功能之一，非常感谢 Arun Sekar 的此代码技巧.","time":"2013 年 8 月 6 日，星期二",作者":Srinivas Tamada"},{"title":"墙体脚本 6.0","url":"http://www.9lessons.info/2013/07/wall-script.html","横幅":"https://lh5.googleusercontent.com/-ErPa0tEQgLs/UfZzaQ3NcFI/AAAAAAAAAH7o/h_KH8Rf4AXs/s550/WallBanner.jpg","description":"推出全新的Wall Script 6.0，丰富的社交网络功能.就在一年后，我发布了Wall Script上一版本，反响热烈，销售火爆.这个脚本IDEA是我的想象中诞生的，引入了强大的功能像对话、OEmebd URL 扩展系统、喜欢/分享和多张图片滑块.","time":"2013 年 7 月 29 日，星期一",作者":Srinivas Tamada"}],总计":1207}

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

解决方案

您的 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?

解决方案

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>

这篇关于AngularJS 从 json 获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！