简体   繁体   中英

Data is not get from json file using angularjs

Here is my HTML file and JS file I'm not getting any data's from the JSON file to the html file Below I have HTML files and JS files:

<!Doctype html>
   <html ng-app>
   <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
    <script type="text/javascript">
      alert("c");
function imagecontroller($http,$scope){
    alert("cd");
    $http.get('ytdata.json').success(function(ytdata) {
        alert("cdscdsc");
                $scope.data = ytdata;
    });
}  
   </script>
 <style type="text/css">
        li{list-style:none;float:left;padding:20px;}
     a{text-decoration:none;}
 </style>
</head>
          <body>
   <div ng-controller="imagecontroller">
     <ul> 
     <li ng-repeat="datum in data">
              <a>
             <img ng-src="{{datum.thumbUrl}}"/>
                    <br />Id : {{datum.id}} 
                        <br />Purchase : {{datum.Purchase}} 
        </a>
    </li>
</ul>
</div>
   </body>
   </html>

This is my json file:

[
        {
            "id":"mobile.jpg",
            "thumbUrl":"image url",
            "Purchase":20000
        },
        {
            "id":"pendrive.jpg",
            "thumbUrl":"image url",
            "Purchase":400
        },
        {
            "id":"laptop.jpg",
            "thumbUrl":"image url",
            "Purchase":3833
        }

]

Please get me the output for this program

Thanks in advance

Here is a working plunker of what you are trying to do :

Controller

app.controller('MainCtrl', function($scope, $http) {
  $scope.data = null;
  $http.get("data.json").success(function (data) {
    $scope.data = data;
  });
});

View

<body ng-controller="MainCtrl">
  <ul>
    <li ng-repeat="datum in data">
      <a>
        <img ng-src="{{datum.thumbUrl}}" />
        <br />Id : {{datum.id}}
        <br />Purchase : {{datum.Purchase}}
      </a>
    </li>
  </ul>
</body>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM