Anzeige von Daten aus der JSON-Datei im ionischen Projekt

Ich habe ein Problem in Bezug auf die Ausgabe des ionischen Projekts, wo die Daten von einer JSON-Datei abgerufen werden. Obwohl ich nach Syntaxfehlern suchte, konnte ich den Fehler nicht finden. Ich habe versucht, ionische Befehle zu verwenden, aber das Ergebnis ist das gleicheAnzeige von Daten aus der JSON-Datei im ionischen Projekt


 

 
Angular modules 
 

 
angular.module('starter', ['ionic']) 
 

 
.run(function($ionicPlatform) { 
 
    $ionicPlatform.ready(function() { 
 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
 
     
 

 
     
 
     cordova.plugins.Keyboard.disableScroll(true); 
 
    } 
 
    if(window.StatusBar) { 
 
     StatusBar.styleDefault(); 
 
    } 
 
    }); 
 
}) 
 

 
.controller('ListController',['$scope','$http', function($scope,$http){ 
 
    $http.get('js/cars.json).success(function(data){ 
 
     $scope.cars=data; 
 
    }); 
 
}]);

//Json file 
 

 
{ 
 
    data: [{ 
 
     manufacturer: 'Porsche', 
 
     model: '911', 
 
     price: 135000, 
 
     wiki: 'Dr.-Ing. h.c. F. Porsche AG, usually shortened to Porsche AG, is a German automobile manufacturer specializing in high-performance sports cars, SUVs and sedans', 
 
     img: '2004_Porsche_911_Carrera_type_997.jpg' 
 
    },{ 
 
     manufacturer: 'Nissan', 
 
     model: 'GT-R', 
 
     price: 80000, 
 
     wiki:'Nissan Motor Company Ltd, usually shortened to Nissan, is a Japanese multinational automobile manufacturer headquartered in Nishi-ku, Yokohama, Japan', 
 
     img: '250px-Nissan_GT-R.jpg' 
 
    },{ 
 
     manufacturer: 'BMW', 
 
     model: 'M3', 
 
     price: 60500, 
 
     wiki:'Bayerische Motoren Werke AG, usually known under its abbreviation BMW, is a German luxury vehicles, motorcycle, and engine manufacturing company founded in 1916', 
 
     img: '250px-BMW_M3_E92.jpg' 
 
    },{ 
 
     manufacturer: 'Audi', 
 
     model: 'S5', 
 
     price: 53000, 
 
     wiki:'Audi AG is a German automobile manufacturer that designs, engineers, produces, markets and distributes luxury vehicles. Audi oversees worldwide operations from its headquarters in Ingolstadt, Bavaria, Germany', 
 
     img: '250px-Audi_S5.jpg' 
 
    },{ 
 
     manufacturer: 'Ford', 
 
     model: 'TT', 
 
     price: 40000, 
 
     wiki:'Audi AG is a German automobile manufacturer that designs, engineers, produces, markets and distributes luxury vehicles. Audi oversees worldwide operations from its headquarters in Ingolstadt, Bavaria, Germany', 
 
     img: '250px-2007_Audi_TT_Coupe.jpg' 
 
    }] 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title></title> 
 

 
    <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
 
    <link href="css/style.css" rel="stylesheet"> 
 

 
        
 
    <script src="lib/ionic/js/ionic.bundle.js"></script> 
 

 
    
 
    <script src="cordova.js"></script> 
 

 
    
 
    <script src="js/app.js"></script> 
 
    </head> 
 
    <body ng-app="starter"> 
 

 
    <ion-pane> 
 
     <ion-header-bar class="bar-dark"> 
 
     <h1 class="title">Vehicle Search</h1> 
 
     </ion-header-bar> 
 
     <div clas="bar bar-subheader item-input-inset bar-light"> 
 
     <label class="item-input-wrapper"> 
 
      <i class="icon ion-search placeholder-icon"></i> 
 
      <input type="search" placeholder="Search"> 
 
      </label> 
 
     </div> 
 
     
 
     <ion-content ng-controller="ListController" class="has-subheader"> 
 
     <ion-list> 
 
     <ion-item ng-repeat='item in cars' class="item-thumbnail-left item-text-wrap"> 
 
      <img src="img/{{item.manufacturer}}.jpg" alt="{{item.model}} Photo"> 
 
      <h2><b>{{item.manufaturer}}</b></h2> 
 
      <h3>{{item.model}}</h3> 
 
      <h4>{{item.price}}</h4> 
 
      <p>{{item.wiki}}</p> 
 
     </ion-item> 
 
     </ion-list> 
 
     </ion-content> 
 
     </ion-pane> 
 
    </body> 
 
</html>

Quelle

2016-04-13 dgcharitha

Es gibt einige Formatierungsprobleme mit Ihrem Code. Zunächst einmal müssen Sie doppelte Anführungszeichen in Ihrer JSON-Datei verwenden, etwa so:

{ 
    "data": [{ 
     "manufacturer": "Porsche", 
     "model": "911", 
     "price": "135000", 
     "wiki": "Dr.-Ing. h.c. F. Porsche AG, usually shortened to Porsche AG, is a German automobile manufacturer specializing in high-performance sports cars, SUVs and sedans", 
     "img": "2004_Porsche_911_Carrera_type_997.jpg" 
    },{ 
     "model": "GT-R", 
     "manufacturer": "Nissan", 
     "price": "80000", 
     "wiki":"Nissan Motor Company Ltd, usually shortened to Nissan, is a Japanese multinational automobile manufacturer headquartered in Nishi-ku, Yokohama, Japan", 
     "img": "250px-Nissan_GT-R.jpg" 
    },{ 
     "manufacturer": "BMW", 
     "model": "M3", 
     "price": "60500", 
     "wiki":"Bayerische Motoren Werke AG, usually known under its abbreviation BMW, is a German luxury vehicles, motorcycle, and engine manufacturing company founded in 1916", 
     "img": "250px-BMW_M3_E92.jpg" 
    },{ 
     "manufacturer": "Audi", 
     "model": "S5", 
     "price": "53000", 
     "wiki":"Audi AG is a German automobile manufacturer that designs, engineers, produces, markets and distributes luxury vehicles. Audi oversees worldwide operations from its headquarters in Ingolstadt, Bavaria, Germany", 
     "img": "250px-Audi_S5.jpg" 
    },{ 
     "manufacturer": "Ford", 
     "model": "TT", 
     "price": "40000", 
     "wiki":"Audi AG is a German automobile manufacturer that designs, engineers, produces, markets and distributes luxury vehicles. Audi oversees worldwide operations from its headquarters in Ingolstadt, Bavaria, Germany", 
     "img": "250px-2007_Audi_TT_Coupe.jpg" 
    }] 
}

Sie sind nicht auch das richtige Objekt zugreifen. Die folgende Zeile:

$scope.cars=data.data;

data enthält das $http.get Ergebnis, das die gesamte JSON-Objekt ist so würden Sie tatsächlich durch data.data iterieren wollen:

$scope.cars=data;

sollte geändert werden.

Sie haben auch eine fehlende Apostroph hier:

$http.get('js/cars.json)

Ändern Sie diesen an:

$http.get('js/cars.json')

Diese Änderungen Ihr Problem beheben sollte.

Quelle

2016-04-13 14:42:16 ankur

Ich bearbeitet, wie Sie erwähnt, aber immer noch die vorherigen Ergebnisse – dgcharitha

Ich habe meine Antwort aktualisiert. Das neue sollte für dich arbeiten. – ankur

Es hat funktioniert Vielen Dank ankur ... du hast meinen Tag gerettet .. ich war nicht sehr bewusst auf Json mein Fehler .. – dgcharitha

Anzeige von Daten aus der JSON-Datei im ionischen Projekt

Antwort

Verwandte Themen