Fatal编程技术网
  • javascript/
  • Javascript 如何使用Angular.js在页面上显示从JSON检索的图像

Javascript 如何使用Angular.js在页面上显示从JSON检索的图像

javascript html ajax json angularjs

Javascript 如何使用Angular.js在页面上显示从JSON检索的图像,javascript,html,ajax,json,angularjs,Javascript,Html,Ajax,Json,Angularjs,我是angular.js的新手。我正在开发一个shoppingcart应用程序，我正在通过AJAX调用从数据库中获取一个JSON对象。但我不知道如何使用Angular js在Html页面上显示JSON响应中的所有图像（JSON中存储在fileLocation中的url） 这是我的密码： 我的JSON { "_embedded": { "binaries": [ { "fileLocation": "http://images.clipartpa

我是angular.js的新手。我正在开发一个shoppingcart应用程序，我正在通过AJAX调用从数据库中获取一个JSON对象。但我不知道如何使用Angular js在Html页面上显示JSON响应中的所有图像（JSON中存储在fileLocation中的url）

这是我的密码：

我的JSON

{
  "_embedded": {
    "binaries": [
        {
            "fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "testuser3",
            "description": "The company required the 28-year-old's help on a matter the directors felt could affect the share price: its Wikipedia page. Short, uninteresting ."
        },
        {
            "fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "Sumanth",
            "description": "Sample"
        },
        {
            "fileLocation": "http://images.clipartpanda.com/sports-equipment-clipart-black-and-white-soccer-ball-hi.png",
            "username": "as",
            "description": "as"
        }
    ]
  }
}
JSON被分配给变量数据

我的Angularjs控制器：

 myAppDirectives.
  controller('MainCtrl', function ($scope,$http,dateFilter) {
  $http({ method: 'GET', url: 'http://localhost:8087/sportsrest/binaries/' }).success(function (data) {
   var result = data;
     var json=JSON.stringify(result);
     var data = JSON.parse(json);
     $scope.cart = data; // response data 
 }).
 error(function (data) {
     alert("error" + data);
     console.log(data);
 });
});
我的HTML页面：

<html lang="en" ng-app="myApp" id="ng-app">
<body ng-controller="MainCtrl">
  <article class="main-content" role="main">
    <section class="row">
      <div class="content">
        <div class="bookmarks-list">
          <ul>
             <li ng-repeat="data">
                 <h3>{{cart._embedded.binaries.username}}</h3>
                 <img ng-src="{{cart._embedded.binaries.fileLocation}}"/>
             </li>
           </ul>
        </div>
      </div>
    </section>
  </article>    
</body>
</html>



    

  • 
{{cart._embedded.binaries.username}

    •
任何人都可以帮助我如何迭代JSON对象上的所有图像并显示在HTML页面上

提前感谢。

指令未正确使用

这应该对你有用

在HTML代码中：

<li ng-repeat="item in cart._embedded.binaries">
             <h3>{{item.username}}</h3>
             <img ng-src="{{item.fileLocation}}"/>
 </li>

  • 
{{item.username}

    •
    这里有一条指令未正确使用

    这应该对你有用

    在HTML代码中：

    <li ng-repeat="item in cart._embedded.binaries">
             <h3>{{item.username}}</h3>
             <img ng-src="{{item.fileLocation}}"/>
 </li>

  • 
{{item.username}

    •
    这里有一个

    您的
    ng repeat
    变量不正确。它应该在
    购物车上。_embedded.binaries
    数组：

    <li ng-repeat="item in cart._embedded.binaries">
    <h3>{{item.username}}</h3>
    <img ng-src="{{item.fileLocation}}"/>
 </li>
    您的
    ng repeat
    变量不正确。它应该在
    购物车上。_embedded.binaries
    数组：

    <li ng-repeat="item in cart._embedded.binaries">
    <h3>{{item.username}}</h3>
    <img ng-src="{{item.fileLocation}}"/>
 </li>
    @ijada感谢重播。我在控制器代码中将存储在数据中的json分配给$scope.cartabove@ijada谢谢重播。我在上面的控制器代码中将存储在数据中的json分配给$scope.cart，这要感谢replay。它不起作用。我是否需要更改Controlleries中的任何内容？Yes，我已更新了我的答案，以说明在AJAX请求的
    成功
    回调中您可能尝试更改的内容。@darvin它显示的是空html页面。我是否需要分配$scope.item=数据；在我的控制器中？是否检查了控制台中的潜在错误？如果添加
    Console.log（数据），则在
    success
    回调中你能在控制台中看到正确的JSON吗？谢谢你的重播。它不工作了。我是否需要更改Controlleries中的任何内容？Yes，我已更新了我的答案，以说明在AJAX请求的
    成功
    回调中您可能尝试更改的内容。@darvin它显示的是空html页面。我是否需要分配$scope.item=数据；在我的控制器中？是否检查了控制台中的潜在错误？如果添加
    Console.log（数据），则在
    success
    回调中
    你能在控制台中看到正确的JSON吗？@Ashokkumar用一个演示更新了代码。如果它对您仍然不起作用，那么我建议检查您的JSON，如果它，正如您在问题中提到的，您的演示代码与您在回答中使用的代码不同，这可能会混淆。@ijade感谢您的重播，我将尝试并通知您you@ijade谢谢重播。有一次，我会试着回去you@ijade感谢您的支持和重播。。你的演示帮助了我。再次感谢你。保持rocking@Ashokkumar用演示更新了代码。如果它对您仍然不起作用，那么我建议检查您的JSON，如果它，正如您在问题中提到的，您的演示代码与您在回答中使用的代码不同，这可能会混淆。@ijade感谢您的重播，我将尝试并通知您you@ijade谢谢重播。有一次，我会试着回去you@ijade感谢您的支持和重播。。你的演示帮助了我。再次感谢你。继续摇摆