<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Datenausgabe mit angularJS aus JSON</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css" />
</head>
<body ng-app="potatoApp">
<div class="container">
<div class="potato-list-wrap" ng-controller="potatoCtrl">
<form>
<hr />
<div class="form-group">
<select class="form-control" ng-model="obj.cookingType" ng-options="type for type in uniqueTypes">
<option value="">Kochtyp</option>
</select>
</div>
<hr />
<div class="form-group">
<select class="form-control" ng-model="obj.pickingType" ng-options="type for type in uniquePicking">
<option value="">Erntezeit</option>
</select>
</div>
</form>
<table class="table table-hover potato-list">
<tr>
<th>Name</th>
<th>Herkunft</th>
<th>Blüte</th>
<th>Knolle</th>
<th>Schale</th>
<th>Ernte</th>
<th>Ertrag</th>
<th>Geschmack</th>
<th>Typ</th>
</tr>
<tr class="potato-item" ng-repeat="potatos in filterdPotatoData = (potatoData | filter: customFilter(obj.cookingType) | filter: customFilter(obj.pickingType))">
<td><strong>{{potatos.name}}</strong></td>
<td>{{potatos.herkunft}}</td>
<td>{{potatos.bluete}}</td>
<td>{{potatos.knolle}}</td>
<td>{{potatos.schale}}</td>
<td>{{potatos.ernte|arrayToList}}</td>
<td>{{potatos.ertrag}}</td>
<td>{{potatos.geschmack}}</td>
<td>{{potatos.typ|arrayToList}}</td>
</tr>
</table>
<div class="alert alert-info" ng-show="!filterdPotatoData.length">Für Ihre Auwahl liegen keine Ergebnisse vor</div>
</div>
</div>
</body>
</html>
/**
* Created by sandrobirke on 09.12.16.
*/
(function(){
var potatoApp = angular.module('potatoApp', []);
potatoApp.controller('potatoCtrl', function($scope, $http){
var jsonPath = 'data.json';
$http.get(jsonPath).then(function(response){
$scope.potatoData = response.data;
// Kochtypen als Object
$scope.typesArr = [];
for(var i = 0; i < $scope.potatoData.length; i++){
for(var k = 0; k < $scope.potatoData[i].typ.length; k++){
$scope.typesArr.push($scope.potatoData[i].typ[k]);
}
}
$scope.uniqueTypes = $scope.typesArr.filter(function(item, index){
return $scope.typesArr.indexOf(item) == index;
});
// Erntezeit als Object
$scope.pickingArr = [];
for(var i = 0; i < $scope.potatoData.length; i++){
for(var k = 0; k < $scope.potatoData[i].ernte.length; k++){
$scope.pickingArr.push($scope.potatoData[i].ernte[k]);
}
}
$scope.uniquePicking = $scope.pickingArr.filter(function(item, index){
return $scope.pickingArr.indexOf(item) == index;
});
// Filter
$scope.customFilter = function(item){
if(item === null){
return "";
} else {
return item;
}
}
});
});
potatoApp.filter('arrayToList', function(){
return function(arr) {
return arr.join(',');
}
});
})();
[
{
"name": "Ackersegen",
"herkunft": "Deutschland (1929); Kreuzung aus HINDENBURG und ALLERFRÜHSTE GELBE; Züchter: Georg Friedrich Böhm aus Groß Bieberau im Odenwald",
"bluete": "weiß, reich blühend ",
"knolle": "rundoval bis oval, mittelgroß bis groß",
"schale": "ockergelb, glatt bis genetzt, flache Augen",
"ernte": ["sehr spät"],
"ertrag": "ertragreich",
"geschmack": "gut buttrig bis würzig",
"typ": ["vorwiegend festkochend", "mehlig kochend"],
"verwendung": "universell einsetzbar als Back-, Folien-, Pell-, Püree- und Salzkartoffel"
},
{
"name": "Adretta",
"herkunft": "Deutschland (1975), Züchter: Dr. K.H. Möller aus Groß Lüsewitz",
"bluete": "weiß, reich blühend",
"knolle": "rund bis rundoval, mittelgroß",
"schale": "ocker, genetzt, mit flachen Augen",
"ernte": ["mittelfrüh", "früh"],
"ertrag": "guter Ertrag",
"geschmack": "excellenter Geschmack",
"typ": ["mehlig kochend"],
"verwendung": "Back-, Kloß-, Pell-, Püree- und Salzkartoffel"
},
{
"name": "Bamberger Hörnchen",
"herkunft": "alte deutsche Landsorte (Franken, vor 1850)",
"bluete": "weiß bis schwach rosa, wenige Blüten, niedrige Stauden ",
"knolle": "länglich, dünn, fingerförmig, klein bis mittelgroß, neigt zu Verwachsungen und bildet mitunter skurrile Formen aus",
"schale": "gelb bis rosa, tiefe Augen",
"ernte": ["mittelspät"],
"ertrag": "mäßiger Ertrag, kann nicht maschinell geerntet werden",
"geschmack": "hervorragend, kräftig, leicht nussig und würzig, feste Konsistenz",
"typ": ["fest kochend"],
"verwendung": "Brat-, Gourmet-, Gratin-, Pell, Salat und Salzkartoffel"
},
{
"name": "Edzell Blue",
"herkunft": "Schottland (1915 oder früher), alte Landsorte",
"bluete": "weiß",
"knolle": "rund, mittelgroß",
"schale": "dunkelblau bis blauviolett, genetzt, mit tiefen Augen",
"ernte": ["mittelfrüh"],
"ertrag": "guter Ertrag",
"geschmack": "gut und kräftig, leicht körnige Konsistenz",
"typ": ["mehlig kochend"],
"verwendung": "Püree-, Back- und Salzkartoffel; in dünnen Scheiben mit Schale frittiert ist sie ein schöner optischer Blickfang"
}
]