Ich versuche, eine JSON-Datei zu analysieren und Fotos im Web mit angularjs anzuzeigen. Aber Json Daten werden nicht analysiert.AngularJs: JSON Parsing
Das ist mein js:
var myApp = angular.module('demoApp', ['angularGrid']);
myApp.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}
]);
myApp.service('imageService',['$q','$http',function($q,$http,$scope){
this.loadImages = function(){
return $http.get("https://gist.githubusercontent.com/vedant1811/ebc4effaeeb2d4524460164a3524d003/raw/ecfa9855867c1b51dad52936cfe4b83a3447ea7a/example_model_response.json");
};
}])
.controller('demo', ['$scope','imageService', 'angularGridInstance', function ($scope,imageService,angularGridInstance) {
imageService.loadImages().then(function(data){
data.photos.forEach(function(obj){
var desc = obj.description,
width = desc.match(/width="(.*?)"/)[1],
height = desc.match(/height="(.*?)"/)[1];
obj.actualHeight = height;
obj.actualWidth = width;
});
$scope.pics = data.photos;
});;
}]);
Hier ist ein Teil meiner Json Datei:
{
"id": 10,
"name": "username",
"location": "locationname",
"sex": "female",
"height": 134,
"bio": "Actress and Model",
"photos": [
{
"id": 113,
"description": "",
"width": 184,
"height": 274,
"position": null,
"icon": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/icon/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525",
"medium": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/medium/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525",
"large": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/large/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525",
"xlarge": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/xlarge/b886c18cccd174f06b5d9b89c73aa937.jpeg?1460810525"
},
{
"id": 112,
"description": "",
"width": 160,
"height": 200,
"position": null,
"icon": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/icon/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626",
"medium": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/medium/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626",
"large": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/large/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626",
"xlarge": "http://s3.amazonaws.com/voggle-paperclip-production/production/photoable/xlarge/c9b59672a96087640a69b4d8c7cca00b.jpeg?1460810626"
},
Hier mein HTML-Textkörper:
<body class="" data-ng-controller="demo">
<ul class="dynamic-grid" angular-grid="pics" grid-width="300" gutter-size="10" angular-grid-id="gallery" refresh-on-img-load="false" >
<li data-ng-repeat="pic in pics" class="grid" data-ng-clock>
<img src="{{pic.medium}}" class="grid-img" data-actual-width = "{{pic.actualWidth}}" data-actual-height="{{pic.actualHeight}}" />
</li>
</ul>
</body>
Bitte jemand helfen kann?
was bedeutet "Json-Daten nicht analysiert zu werden" bedeutet, genau? Wenn Sie ein paar "console.log" -Anweisungen in Ihren '.then'-Callback stellen, haben Sie dann nicht die Daten, die Sie erwarten? – Claies
Versuchen Sie es mit der Registerkarte "Netzwerk" in der Entwicklerkonsole Ihres Browsers, um sicherzustellen, dass Sie das empfangen, was Sie zu sein glauben. Die Antwort könnte einfach eine Zeichenfolge und kein Objekt sein, wie Sie denken. Auch würde es helfen, wenn Sie erklärten, was der genaue Fehler oder das Problem ist. – dearn44
Ich möchte Bilder mittlerer Größe wie in JSON-Datei anzeigen. Aber nichts wird angezeigt! @ dearn44 – Abhishek