AngularJs: JSON Parsing

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?

Quelle

2016-06-07 Abhishek

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

Sie wurden so nicht richtig, die Objekte der Handhabung, dass Sie nicht definierte Ausnahmen bekommen wurden. Zweitens brauchen Sie data.data.photos.

.controller('demo', ['$scope','imageService', function ($scope,imageService) { 
    imageService.loadImages().then(function(data){ 
     data.data.photos.forEach(function(obj){ 
      var desc = obj.description; 
      width = null; 
      height = null; 
      if(desc){ 
       width = desc.match(/width="(.*?)"/)[1], 
       height = desc.match(/height="(.*?)"/)[1]; 
      } 
      obj.actualHeight = height; 
      obj.actualWidth = width; 
     }); 
     $scope.pics = data.data.photos; 
    }); 
}]);

prüfen diese jsfiddle

Quelle

2016-06-07 11:56:38

Keine Notwendigkeit, jene forEach und zusätzlich Änderung data.photos-data.data.photos wie zu setzen, wie pro E. Abrakov Antwort,

var myApp = angular.module('demoApp', []); 
 

 
    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', function ($scope,imageService) { 
 
     imageService.loadImages().then(function(data){ 
 
      $scope.pics = data.data.photos; 
 
     }); 
 
    }]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<body ng-app="demoApp" 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>

Quelle

2016-06-07 11:15:12

Ja .. ich denke,/rohe/github URL sind in ajax Anrufe – Abhishek

eingeschränkt Hmm ... Vielen Dank @Nidish .. :) – Abhishek

Versuchen auf der folgenden Sachen werfen Sie einen Blick alle data.photos-data.data.photos ändern

Das Antwortobjekt hat folgende Eigenschaften:

Daten - {string | Object} - Der mit den Transformationsfunktionen transformierte Antworttextkörper. Status - {Nummer} - HTTP-Statuscode der Antwort. Header - {Funktion ([HeaderName])} - Header Getter-Funktion. config - {Objekt} - Das Konfigurationsobjekt, das zum Generieren der Anforderung verwendet wurde. statusText - {string} - HTTP-Statustext der Antwort.

können Sie here lesen

Quelle

2016-06-07 11:16:54

Eine Erklärung warum würde OP besser verstehen helfen – charlietfl

Es könnte auch 'd sein. Fotos, aber versuchen, nach dem Zufallsprinzip, bis Sie es bekommen, ist nicht der richtige Weg, um sein Problem zu lösen. – dearn44

@ dearn44 Diese Antwort ist, weil die "Daten" von OP eigentlich ein Antwortobjekt "$ http" sind, das neben anderen Eigenschaften die Eigenschaft "data" enthält. Es ist keine Vermutung – charlietfl

AngularJs: JSON Parsing

Antwort

Verwandte Themen