Keskustelu: Nettisivujen teko: Apuja JSON-tehtävään

s3t [26.01.2018 15:44:55]

Mikähän tässä on vikana kun ei lue json tiedostoa? Koodi muokattu toimivaan mallipohjaan.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Tehtävä4</title>
</head>

<body>

<div id="texthere"></div>
<!-- 1. Määritellään div, jonka sisään tulostus tehdään kohdassa 6 -->

<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://api.citybik.es/v2/networks/citybikes-helsinki";  // 2. url, josta data luetaan

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr); // 3. tarkistetaan, yhteys ja määritellään uusi funktio, jota kutsutaan löydetyllä datalla.
    }
}
xmlhttp.open("GET", url, true); // 4. avataan url
xmlhttp.send();

function myFunction(arr) { // 5. funktio, jossa toiminnallisuus
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += arr[i].name + " " +
        arr[i].free_bikes + '<br>';
    }
    document.getElementById("texthere").innerHTML = out; // 6. HTML-elementti, johon tulostus tehdään
}
</script>

</body>
</html>

Grez [26.01.2018 16:10:42]

Mun nähdäkseni se lukee json-tiedoston ihan hienosti. Rivillä 21 myArr -sisältö vastaa ihan hyvin ladattua jsonia.

Sen sijaan myFunction koodi yrittää lukea annettua objektia kuin se olisi taulukko, vaikka se ei ole.

Koodin saisi luultavasti toimimaan korvaamalla rivin 21 seuraavalla:

myFunction(myArr.network.stations); // 3. tarkistetaan, yhteys ja määritellään uusi funktio, jota kutsutaan yhdellä löydetyn datan taulukoista.

s3t [26.01.2018 17:00:25]

Jep, kiitos. Alkoi heti toimimaan. :)

s3t [08.02.2018 01:20:57]

Uusi kysymys. Muutin tuota niin, että scripti on omassa tiedostossaan sekä tieto haetaan xml-muodossa. Osaatteko sanoa miksi ei toimi?

index.html:

<html>
<head>

    <meta charset="utf-8">

</head>

<body onload="myFunction();">

    <div id="texthere"></div>
    <script src="pyoratilanne.js"></script>

</body>
</html>

pyoratilanne.js:

var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "https://api.digitransit.fi/routing/v1/routers/hsl/bike_rental", true); // Avaa linkki

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = xmlhttp.responseXML;
        myFunction(myArr.BikeRentalStationList.stations.stations); // Määritellään uusi funktio, jota kutsutaan löydetyllä datalla.
    }
}
xmlhttp.send();

function myFunction(arr) {
    var out = "";
    var i;
    for(i = 0; i < arr.length; i++) {
        out += arr[i].name + '<br>' + " Tyhjiä paikkoja: " +
        arr[i].empty_slots + " Vapaita pyöriä: " +
        arr[i].free_bikes + '<br>' + '<br>';
    }
    document.getElementById("texthere").innerHTML = out; // Teksti sivuille
}

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen