JSON służy do wymiany danych głównie w kierunku z PHP/MySQL do aplikacji Html/JS (Angular).

Rozdzielamy kod w taki sposób, aby aplikacja PHP nie generowała w ogóle kodu HTML tylko czyste dane zapisane w postaci JSON.

To zapis tablic asocjacyjnych przykładowej postaci

1
[{"id":3, "marka":"Opel", "model":"Corsa"}, {"id":4, "marka":"Ford", "model":"Focus"}]

Jak widać każdy wpis wewnątrz nawiasów { } to jeden rekord z bazy danych (z wyniku zapytania), wewnątrz mamy pary „klucz”:wartość, gdzie „klucz” jest odpowiednikiem nazwy kolumny, a wartość danych z tabeli. Wartości liczbowe piszemy (jak w JS) bez cudzysłowu.

JSON wymaga UTF-8 (konwersja w przykładzie), ng-repeat wymaga unikalnych kluczy, jeśli nie można tego zagwarantować używamy dodatkowo track by $index. Zmienne {{zmienna.klucz}} zwrócą wartość klucza z JSON.

Najpierw musimy przygotować plik JSON z bazy w języku PHP:
json_select.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
        header('Access-Control-Allow-Origin: *');
        include "polacz.php"; //wzór pliku we wpisie "Pełny panel administracyjny MySQLi"
        if ($sql = $baza->prepare( "SELECT DISTINCT name,id FROM klienci ORDER BY nazwisko "))
        {
                $sql->execute(); //wykonaj SQL
                $sql->bind_result($nazwisko,$id);
                while ($sql->fetch())
                  $nazwiska[] = array(
                     "id" => $id,
                     "nazwisko" => iconv("ISO-8859-2", "UTF-8", $nazwisko)
                   ); //dla każdego nazwiska tworzy 2 pary, nazwiska przekonwertowane do UTF
                $sql->close();
        }
        $baza->close();
        echo json_encode($nazwiska, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
?>

Potem odczytujemy tak przygotowany plik w Angular JS:
index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
 <meta charset="utf-8">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
 </head>
 <body>
  Wybierz nazwisko:
  <div ng-app="myApp" ng-controller="customersCtrl">
  <select>
   <option ng-repeat="osoba in nazwiska track by $index" value="{{osoba.id}}">{{osoba.nazwisko}}</option>
  </select>
 </div>
 <script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
                $http.get("http://serwer/json_select.php")
                .success(
                  function(data, status, headers, config){
                        $scope.nazwiska=data;
                });
        });
  </script>
 </body>
</html>
HTML + CSS, JavaScript, PHP