Durchsuchbare Liste mit Angular

matur

Die Basellandschaftliche Zeitung hat auf einer ganzen Seite sämtliche Gymnasiasten aufgelistet, die 2014 die Matur bestanden haben. Um dem Leser, der sich nur für einzelne Namen von ihm bekannten Personen interessiert, habe ich mittels AngularJS eine durchsuchbare Online-Version gemacht.

Zunächst mussten die Daten mittels php-Script in eine JSON-Datei umgewandelt werden. Der Quellcode dazu:

<?php
header('Content-Type: application/json');
$output = array();
$gymarray = array();
$schuelerarray = array();
$arr = array(" ---- hier die Daten eingefügt, als Array-Elemente und die Gymnasien mittels || abgetrennt");

foreach($arr as $code) {
    $gym = explode("||",$code);
    //für jedes gymnasium ist der name des gyms als $gym[0] und der ganze rest als $gym[1] verfügbar
    $allesaussergym = explode("–",$gym[1]);
    //jedes Profil ist ein Element in $allesaussergym
    foreach($allesaussergym as $profilundschueler) {
        //durchläuft jedes Profil einzeln
        $aufgeteilt = explode(":",$profilundschueler);
            //der name des Profils ist als $aufgeteilt[0] verfügbar, alle Schüler als $aufgeteilt[1]
            $schueler = explode(";",$aufgeteilt[1]);
            foreach($schueler as $einzelnerschueler){
                //geht alle schüler eines profils durch, jeweils inkl. ort
                $schuelerarray[] = $einzelnerschueler;
                //erweitert das schuelerarray
            }
            $profilarraymitschueler = array($aufgeteilt[0],$schuelerarray);
            //ist ein array für jedes profil, mit [0] = profilname und [1] = array mit den Schülern
            $schuelerarray = [];

            $alleschuelereinesprofils[] = $profilarraymitschueler;
            //konstruiert ein array, das alle profile und schüler enthält
            $profilarraymitschueler = [];
    }
    $gymarray = array($gym[0], $alleschuelereinesprofils);
    $alleschuelereinesprofils = [];
$output[] = $gymarray;
}
$fp = fopen('maturanden.json', 'w');
fwrite($fp, json_encode($output, JSON_UNESCAPED_UNICODE));
fclose($fp);
?>

Das Script baut ein mehrdimensionales Array auf, das danach als JSON-File abgespeichert wird. Dieses wird danach in der AngularJS-Seite eingelesen. Der Quellcode dazu:

<html>
<head>
    <title>Maturanden 2014 BL</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <script src="js.js"></script>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">

</head>
<body ng-app="MaturandenApp" ng-controller="MaturandenCtrl">
Search: <input ng-model="searchText">
    <ul>
        <li ng-repeat='gymnasien in maturanden' ng-show="(gymnasien[1] | filter:searchText).length">
            {{gymnasien[0]}}
            <ul>
                <li ng-repeat='profile in gymnasien[1]' ng-show="(profile | filter:searchText).length">{{profile[0]}}
                    <ul>
                        <li ng-repeat='schueler in profile[1] | filter:searchText'>{{schueler}}</li>

                    </ul>
                </li>
            </ul>
        </li>
    </ul>

</body>

---> + die dazugehörige .js-Datei:
var app = angular.module("MaturandenApp", []);

app.controller("MaturandenCtrl", function($scope, $http) {
    $http.get('maturanden.json').
        success(function(data, status, headers, config) {
            $scope.maturanden = data;
        }).
        error(function(data, status, headers, config) {
            // log error
        });

});

Die grösste Schwierigkeit war, nach einer Suche die Typen / Gymnasien auszublenden, wenn nach der Suche keine Schüler mit entsprechendem Namen aufgelistet werden. Dazu habe ich einen Filter auf das nächstfolgende Array angewendet und die Länge (.length) verwendet. Ist dieser = 0, wird ng-show = false und der Titel wird ausgeblendet.

Autor: Samuel Hufschmid

Jounalist bei bz Basel, Papi, Organisator Swiss Kubb Open, mit Interesse an Datenjournalismus.

Kommentar verfassen