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.