GEO3141

JSON og NVDB

Utenfor en tunnell

ikke langt fra der Sverre bor

står det et

Foto: Asbjørn Risbakken, oa.no

Hva vet vi egentlig om dette

overvåkingskameraet?

Demo

Vi har sett:

NVDB - Nasjonal vegdatabank

- vegkart

- datakatalog

Uthenting av data

som XML - via url i nettleser

som JSON

- via kommandolinje/curl

- via javascript

Hva er egentlig JSON?

{"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

JavaScript Object Notation

- det vil si: JSON ser ut som javascript-objekter i såkalt "literal notation"

var employees = [
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter","lastName": "Jones"}
];

Fra json.org:

JSON is built on two structures:

A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

{"employees":[
    {"firstName":"John", "lastName":"Doe"}, 
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

JSON ble opprinnelig spesifisert av Douglas Crockford,

- kjent javascript-guru

JSON er laget for å være et lettvekts datautvekslingsformat

JSON er en åpen standard,
spesifisert i ECMA 404 / IETF RFC nr. 7159

Gå igjennom W3Schools JSON tutorial for å lære litt mer.

Flere ressurser finnes på json.org

Noen fordeler med JSON

- lett å lese

- tar liten plass - sparer båndbredde

- lett å ta i bruk i på nettsider

- enkelt å konvertere JSON-tekst til javascript-objekter

- se eksempel på W3Schools

JSON egner seg godt i AJAX-appikasjoner

Fra AJAX-tutorial på W3Schools:

AJAX = Asynchronous JavaScript and XML.

AJAX is not a new programming language, but a new way to use existing standards.

AJAX is the art of exchanging data with a server, and updating parts of a web page - without reloading the whole page.

Et enkelt AJAX-eksempel - (for data om overvåkingskamera):

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>NVDB-API demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div id="response"></div>
 
<script>
$.ajax('https://www.vegvesen.no/nvdb/api/vegobjekter/objekt/579095960', {
    'data': {}
})
.then(
    function success(data) {
        for (var key in data) {
            $("#response").append(key, ": ", data[key], "<br>");
            console.log(key, data[key]);
        };       
    },
    function fail(data, status) {
        alert('Request failed.  Returned status of ' + status);
    }
);
</script>
 
</body>
</html>

Utfordring ved bruk av javascript for å hente data til web-applikasjoner:

- ønsker å gjøre "Cross-site HTTP requests", det vil si hente data fra et annet nettsted,

men blir hindret av "Same-origin policy" - en restriksjon som ligger i nettleseren - av sikkerhetshensyn

Løsning:

CORS - Cross-Origin Resource Sharing

CORS er en W3C-standard som beskriver en protokoll for hvordan man kan dele ressurser på tvers av nettsteder.

Dette innebærer at både tilbyder av data, (f.eks. Norge Digitalt-parter) og konsumenter av data (f.eks. studenter ved HIG), må ta hensyn til dette både ved oppsett av tjenester og ved applikasjonsutvikling.

GeoJSON

- uoffisiell standard: geojson.org


   "lokasjon":{  
      "egengeometri":true,
      "geometriUtm33":"POINT (287479.18 6726338.42)",
      "geometriWgs84":"POINT (11.115867858387725 60.61636941421639)",
      "geometriForenkletUtm33":"POINT (287479.18 6726338.42)",
      "geometriForenkletWgs84":"POINT (11.115867858387725 60.61636941421639)",
      "kommune":{  
         "nummer":528,
         "navn":"ØSTRE TOTEN"
      },

NVDB REST-API (