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ć.