Keskustelu: Nettisivujen teko: JavaScript ja JSON

Hei pitäisi saada tehtyä koulutyöhön javascript, joka hyödyntää avointa dataa joka on JSON muodossa. Kuinka tämä kannattaisi tehdä ?

Avointa dataa löytyy netistä hakemalla. JavaScript-oppaita löytyy netistä hakemalla. Varmaan koulussakin on näistä kerrottu, jos kerran on tuollainen tehtävä annettu. Etkö ymmärrä tehtävänantoa, vai onko jokin ihan erityinen ongelma, johon kaipaat vastausta?

Emme ole oikeastaan käyneet vielä JavaScriptiä ollenkaa siksi kysynkin apua. Ohjelma tulisi isompaan projektiin ja sen pitäisi hakea tilastotietoja jalkapallo otteluista (esim: http://sportsopendata.net/ sivustolta) ja julkaisisi ne sivustolle halutussa muodossa.

Ensin voit selvittää, mistä osoitteesta tarkalleen saa sen datan, jonka haluat, ja voit katsoa dataa selaimella, jotta saat käsityksen sen muodosta. Sitten voit tehdä JavaScript-koodin, joka hakee dataa ja näyttää sen sellaisenaan nettisivulla (vaikka tekstikentässä). Lopuksi voit miettiä, miten datan saa sivulle haluamaasi muotoon.

Joka tapauksessa nyt pitää opetella JavaScriptia (ja vaikka jQuery-kirjaston käyttöä). Kannattaa myös kysyä opettajalta, miten tehtävä pitäisi hänen mielestään tehdä, jos kerran tarvittavia tietoja ei ole opetettu. Varmaan itsekin ymmärrät, että et voi odottaa foorumilta ”neuvoja” rivi riviltä koko projektin koodaamiseen, vaan jostain sinun pitää itse lähteä liikkeelle.

Okei...rupesin itse vähän tutkailemaan javascriptiä ja jquerya. Projekti hieman vaihtu ja nyt olisi tarkoitus saada json dataa googlen karttaan. Perus hommat tajuan kyllä mutta mietin että millä tavalla saisin tiedot kaivettua ja aseteltua ne kartalle

json tulevat avoimesta datasta kutakuinki näin:

[
{

    "service_request_id": "1vquikjko1ufvknitf7m",
    "description": " Vuotalon parkkipaikalla on pidempään ollut iso nippu/kasa kaihtimia yms muuta roinaa. Jäivät ikkunaremontin jälkeen siihen. Olisko aika roudata ne pois!Samoin siinä on joku nostin(Ramirent) tyhjän panttina.Viekää sekin pois.",
    "requested_datetime": "2016-11-03T15:35:02+02:00",
    "updated_datetime": "2016-11-04T13:50:01+02:00",
    "status": "closed",
    "status_notes":
    "service_name": "",
    "address": "Vuosaarentie 5",
    "lat": 60.2088855,
    "long": 25.1414302

},
{

    "service_request_id": "1ccqaiit9fj16orr0gsh",
    "description":
    "requested_datetime": "2016-11-03T15:35:00+02:00",
    "updated_datetime": "2016-11-04T13:45:02+02:00",
    "status": "closed",
    "status_notes":
    "agency_responsible": "",
    "service_name": "",
    "address": "Käskynhaltijantie 22, 00640 Helsinki, Suomi",
    "lat": 60.2341864,
    "long": 24.9665555

}
]

ja haluisin nuo koordinaatti tiedot jotta voin merkitä ne kartalle ja jolloin merkintää klikkaa saa siitä lisää tietoa. Tarvitsen apua .getJSON riville että millä tavalla saisin loopattua ja sen jälkeen merkittyä kartalle niin että merkkejä olisi useampia. Tiedot siis tulevat helsingin kaupungin rajapinnasta

Mod. lisäsi kooditagit!

voit käsitellä jsoniasi ihan suoraan objektina.

var data = mestaMistaSaatJsonDatasi();
$.each(data, function(i) {
	$(".jokuluokka").append("<p>" + data[i].address + " (" +   data[i].lat + ":" + data[i].long +  ")</p>");
})

Mikäli json palautuu sinulle merkkijonona, on se parsittava objektiksi ensin

var jsonMerkkijono = mestaMistaSaatJsonDatasi();
var data = jQuery.parseJSON(jsonMerkkijono);
$.each(data, function(i) {
	$(".jokuluokka").append("<p>" + data[i].address + " (" +   data[i].lat + ":" + data[i].long +  ")</p>");
})

esimerkki jossa palautetaan ylläoleva jsoni arrayna loopattavaksi, JSFiddle

ps. Tuossa jsonissasi oli vähän virheitä.. voit validoida jsonia osoitteessa JSONLint

kiiitos paljon :)!

Lisäys: hmmm vaikuttaako asia jollain tavalla jos url mistä haen datan on https:// eikä http:// ??

voihan tuo vaikuttaa, jos esimerkiksi kyseinen sivusto ei sisällä validia sertifikaattia.

Lähtökohtaisesti kuitenkin ei vaikuta. Kannattaa testata esimerkiksi selaimella, saatko datan ulos (Get) samasta urlista mistä yrität koodilla hakea.

urli on siis:https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2013-04-24T00:00:00Z&end_date=2013-05-24T00:00:00Z

esimerkki JSFiddle

Okei sain aikaseks tälläisen koodin ja homma toimii ainaki omasta mielestä ihan hyvin, mutta mitenkäs saisin tehtyä niin että infoikkuna sulkeutuu silloin kun toisen avaa

koodi:

var map;

function initMap() {
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 60.16985569999999, lng: 24.938379}, zoom: 12 });
var infowindow =  new google.maps.InfoWindow({
        content: ''
    });
}




$(document).ready(function() {
  //kutsutaan fetchDataa kun sivu on ladattu
	fetchData();

});

function fetchData() {

	$.get('https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2016-01-01T00:00:00Z&extensions=true&status=open', function(result)
  {


  	renderData(result);
  });
}

function renderData(json)
{
	$.each(json,function(i) {

  var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.long);

  var infowindow = new google.maps.InfoWindow();

  var marker = new google.maps.Marker({
    position: latLng,
    map: map,
    title: data.title
  });

var tila;
if(json[i].status === 'closed'){
  tila='Korjaus pyyntö lähetetty';
}
else {
  tila='Korjaus pyyntöä ei ole lähetetty';
}


      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.close();
          infowindow.setContent(json[i].description + '<br>Osoite: '+ json[i].address +'<br>Tila: '+ tila);
          infowindow.open(map, marker);
        }
      })(marker, i));

	})
}