JSON: wyświetlanie danych
W kilku wcześniejszych artykułach kończyliśmy rozważania na utworzeniu serwisu generującego dane JSON. URI do tych danych może posłużyć do integracji z innym systemem czy interfejsem wyświetlającym dane, najczęściej w języku JavaScript. Przypomnę dwa posty sprzed kilku lat:
Serwis OpenEdge – Telerik Kendo UI,
Rollbase i serwisy OpenEdge,
w których opisałem dwa produkty wyświetlające dane pochodzące z formatu JSON.
Istnieje wiele środowisk, w których możemy tworzyć front-end w JavaScript, ale dziś pokażę jak wyświetlić dane na dwóch prostych przykładach.
Weźmy JSON wygenerowany w poprzednim artykule. Struktura danych jest następująca dsCustomer.ttCustomer[i]… dane do pól rekordów.
Nie ma tutaj znaczenia czy plik JSON jest wygenerowany do katalogu. Dane w formacie JSON są przechowywane w pamięci przeglądarki.
W pierwszym przykładzie skorzystamy z metody getJSON, której pierwszym parametrem jest URI do danych JSON.
<!DOCTYPE html>
<html>
<body>
<h2>Customers</h2>
<div id="mydata"></div>
<script>
var getJSON = function(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status == 200) {
callback(null, xhr.response);
} else {
callback(status);
}
};
xhr.send();
};
getJSON('http://localhost:8810/wh/web/pdo/whsrv/customer', function(err, data) {
if (err != null) {
console.error(err);
} else {
var text = `Last Name: ${data.dsCustomer.ttCustomer[1].CustNum}<br>
First Name: ${data.dsCustomer.ttCustomer[1].Name}`
document.getElementById("mydata").innerHTML = text;
}
});
</script>
</body>
</html>
Ten prosty skrypt wyświetla 2 pola z rekordu Customer, a dokładniej zmienną text, w której mogą znajdować się znaki formatujące.
Drugi przykład jest podobny, ale wykorzystuje bibliotekę jQuery. Tym razem wyświetlanych jest kilka rekordów (zmienna text) sformatowanych wg pliku css (nie zamieszczonego).
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<link rel="stylesheet" href="customers.css">
</head>
<body>
<h2>Customers</h2>
<div class="mydata"></div>
<script>
$.getJSON('http://localhost:8810/wh/web/pdo/whsrv/customer', function(edata) {
var text="<table>";
var i;
for(i = 1; i < 11; i++) {
text += "<tr><td>" +`${edata.dsCustomer.ttCustomer[i].CustNum}` + "</td><td>" +
`${edata.dsCustomer.ttCustomer[i].Name}` + "</td><td>" +
`${edata.dsCustomer.ttCustomer[i].City}` + "</td></tr>"
}
text += "</table>";
$(".mypanel").html(text);
});
</script>
</body>
</html>
Efekt widać poniżej.
Napiszcie o swoich przykładach wykorzystujących dane JSON na forum PUG Poland. Jak zapewne zauważyliście forum to zostało przeniesione razem z resztą Progress Communities do nowej lokalizacji, a starsze wątki zastały przeniesione do Archiwum.
Trzeba ponownie się zarejestrować.