Ervaring met API ?(icm html/json)

maandag 4 februari 2019 15:42

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Geachte Lasers,

Hoe implementeer ik een API op mijn website?

Het leek me leuk om bij wijze van test een API op mijn website (HTML) te implementeren.
Nu zijn er public API's van youtube en google maps met een iframe, maar dit is een copy/paste. Dus mijn oog is gevallen op een API van weerlive:

http://weerlive.nl/api/js...ey=demo&locatie=Amsterdam

Kan iemand mij vertellen hoe ik een geedelte van de output op mijn website implementeer.

Uiteraard kan ik ook ergens een widget/iframe ergens opsnorren, maar ik wil graag een gedeelte van deze API output gebruiken.

Het leukst zou natuurlijk zijn met een tekst als: In AMSTERDAM(1) is het op dit moment 34 (2) graden en er is sprake van MOTREGEN(3)

In het voorbeeld hierboven (1) (2) en (3) onderdeel van de output gegenereerd door:

http://weerlive.nl/api/js...ey=demo&locatie=Amsterdam

Ik heb al een paar uur gegoogled en how to guides gelezen, maar kom er niet uit.

Hopelijk kan hier iemand helpen!

Thanks!

/\/\

zondag 10 februari 2019 00:45

xh3adshotx

Verwijderd schreef op zondag 10 februari 2019 @ 00:31:
Ik zal t morgen ff “opschonen” zodat t wat leesbaarder is (heb de laptop dichtgeklapt, tijd voor een biertje :-))

Ik loop vast op het feit dat ik geen response krijg op mijn JavaScript in html in het tweede voorbeeld. In het 1e voorbeeld doe ik precies t zelfde en daar gaat t wel goed.

Ik denk dat het komt door dit stuk Vd code:

document.getElementById("output").innerHTML = data.liveweer.0.samenv;

Bedankt voor je snelle antwoord iig!

Array kan je uitlezen met Array[index].

code:

1	data.liveweer.0.samenv

Moet dus zijn

code:

1	data.liveweer[0].samenv

maandag 4 februari 2019 15:45

Acties:

+1 Henk 'm!

mcDavid

Waar loop je tegenaan dan? Is er een specifieke foutmelding die je niet snapt? Lukt het je uberhaupt om de JSON in te laden / uit te lezen?

maandag 4 februari 2019 16:36

Acties:

+1 Henk 'm!

DJMaze

Pseudo code:

code:

1 2	var data = fetch http://weerlive.nl/api/json-data-10min.php?key=demo&locatie=Amsterdam; echo data->liveweer[0]->samenv;

Maak je niet druk, dat doet de compressor maar

maandag 4 februari 2019 18:15

Acties:

+1 Henk 'm!

Josk79

Dit kan op twee manieren:

1 in de browser van de bezoeker (met javascript de json ophalen en ergens in het html document (DOM) injecteren) of
2 op de server (html genereren met PHP of een andere taal).

Welke manier wil je en waar loop je tegenaan?

maandag 4 februari 2019 23:34

Acties:

+1 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

Het formaat van de data is JSON,
Dus kies een programmeertaal waarbij jij je er lekker bij voelt, en Google dan op {programmeertaal} + JSON. En geheid dat je een mooie manual krijgt.

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

zaterdag 9 februari 2019 23:56

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Bedankt voor het delen van jullie expertise/kennis, met behulp van jullie antwoorden/vragen ben ik me weer gaan verdiepen en vooral gaan proberen.

Nu is het gelukt met een andere API:

HTML:

<body>

<script>
(function() {
  var newXHR = null;

  function sendXHR(type, url, data, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(type, url, true);
    newXHR.send(data);
    newXHR.onreadystatechange = function() { // Use onreadystatechange instead onload.
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }

  sendXHR("GET", "https://sourceforge.net/projects/kaais/files/stats/json?start_date=2013-08-18&end_date=2018-04-19", null, function(response) {
    var data = JSON.parse(response);
    document.getElementById("output").innerHTML = data.end_date;
  });

}());
</script>

<div id="container">
  <div id="output">/div>
</div>


</body>
</html>

maar niet met weerlive API:

HTML:

<!DOCTYPE html>
<html>
<body>


<script>
(function() {
  var newXHR = null;

  function sendXHR(type, url, data, callback) {
    newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
    newXHR.open(type, url, true);
    newXHR.send(data);
    newXHR.onreadystatechange = function() { // Use onreadystatechange instead onload.
      if (this.status === 200 && this.readyState === 4) {
        callback(this.response);
      }
    };
  }

  sendXHR("GET", "http://weerlive.nl/api/json-data-10min.php?key=demo&locatie=Amsterdam", null, function(response) 
{var data = JSON.parse(response);document.getElementById("output").innerHTML = data.liveweer.0.verw;});}());
</script>

<div id="container">
  <div id="output">
</div>


</body>
</html>

Kunnen jullie mij in de goede richting wijzen / helpen.

Het loopt volgens mij stuk op de "subwaarden in de weer API

Alvast bedankt!

[ Voor 0% gewijzigd door RobIII op 10-02-2019 00:40 . Reden: code tags toegevoegd ]

zaterdag 9 februari 2019 23:57

Acties:

+1 Henk 'm!

AW_Bos

Liefhebber van nostalgie... 🕰️

@Verwijderd
Kan je het tussen [code] en [/code] blokken zetten? Dan is het beter leesbaarder.
En waar loop je op vast? Welk stuk van je code? En wat gebeurt er?

[ Voor 4% gewijzigd door AW_Bos op 09-02-2019 23:58 ]

☎ Telecommunicatie van vroeger
🚅Alles over spoor en treintjes

zondag 10 februari 2019 00:31

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik zal t morgen ff “opschonen” zodat t wat leesbaarder is (heb de laptop dichtgeklapt, tijd voor een biertje :-))

Ik loop vast op het feit dat ik geen response krijg op mijn JavaScript in html in het tweede voorbeeld. In het 1e voorbeeld doe ik precies t zelfde en daar gaat t wel goed.

Ik denk dat het komt door dit stuk Vd code:

code:

1	document.getElementById("output").innerHTML = data.liveweer.0.samenv;

Bedankt voor je snelle antwoord iig!

zondag 10 februari 2019 00:44

Acties:

+1 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Html

Verwijderd schreef op zondag 10 februari 2019 @ 00:31:
Ik zal t morgen ff “opschonen” zodat t wat leesbaarder is (heb de laptop dichtgeklapt, tijd voor een biertje :-))

Dat typen was meer werk dan de code tags toevoegen. Als je wil dat mensen je helpen mag je zelf ook wel een beetje inspanning verrichten.

Verder zou ik eens beginnen met debuggen (Debuggen: Hoe doe ik dat?) en deel dan je bevindingen daarvan met ons. "Het loopt volgens mij stuk" is natuurlijk geen probleembeschrijving (wat doet 't wél en wat doet 't niet?). Ook een mededeling als "Ik heb al een paar uur gegoogled en how to guides gelezen, maar kom er niet uit" heeft geen toegevoegde waarde als je niet verteld waarop je hebt gegoogled (zodat we je kunnen helpen wellicht betere termen te gebruiken in 't vervolg), wat je hebt gevonden (zodat we kunnen meekijken of 't wellicht nuttige of niet-nuttige informatie is), wat je geleerd hebt uit die how-to-guides en daarvan hebt toegepast op je probleem enz. Je moet je realiseren dat we niet over je schouder kunnen meekijken noch in je hoofd kunnen kijken

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

zondag 10 februari 2019 00:45

Acties:

Beste antwoord ✓
+1 Henk 'm!

xh3adshotx

Verwijderd schreef op zondag 10 februari 2019 @ 00:31:
Ik zal t morgen ff “opschonen” zodat t wat leesbaarder is (heb de laptop dichtgeklapt, tijd voor een biertje :-))

Ik loop vast op het feit dat ik geen response krijg op mijn JavaScript in html in het tweede voorbeeld. In het 1e voorbeeld doe ik precies t zelfde en daar gaat t wel goed.

Ik denk dat het komt door dit stuk Vd code:

document.getElementById("output").innerHTML = data.liveweer.0.samenv;

Bedankt voor je snelle antwoord iig!

Array kan je uitlezen met Array[index].

code:

1	data.liveweer.0.samenv

Moet dus zijn

code:

1	data.liveweer[0].samenv

zondag 10 februari 2019 00:48

Acties:

+2 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Html

xh3adshotx schreef op zondag 10 februari 2019 @ 00:45:

Wil je voortaan proberen iets minder een kant-en-klare oplossing te geven/posten?

Give a man a fish and feed him for a day. Teach a man how to fish and feed him for a lifetime.

Ik stond op 't punt @Verwijderd te vertellen dat 'ie beide stukken code makkelijk even in een jsfiddle had kunnen plaatsen en dan even in z'n console* had kunnen kijken naar de foutmelding:

Uncaught SyntaxError: Unexpected number op de regel:
{document.getElementById("output").innerHTML = data.liveweer.0.verw;

* Firefox Firebug of Dev.tools / IE F12 Dev.tools / Chrome Dev.tools / Safari Dev.tools

[ Voor 41% gewijzigd door RobIII op 10-02-2019 00:53 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 13 februari 2019 23:15

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

jaaaaaaaaaa! Het is gelukt!

Met jullie hulp, alhoewel het wel ff duurrde voordat ik het gewenste resultaat had, ik had namelijk een grote fout over het hoofd gezien en was aan het debuggen en stond op het punt om een jsfiddle te plaatsen,maaarrr toen zag ik het...

code:

1	sendXHR("GET", "http://weerlive.nl/api/json-data-10min.php?key=demo&locatie=Amsterdam", null, function(response)

dat moet zijn:

code:

1	sendXHR("GET", "https://weerlive.nl/api/json-data-10min.php?key=demo&locatie=Amsterdam", null, function(response)

dus https ipv http

Bedankt voor jullie hulp

(en het stukje opvoeden

)

EDIT:

Voor de volledigheid de juiste code is dus:

code:

 <!DOCTYPE html>
<html>

  <body>
    <script>
      (function() {
        var newXHR = null;

        function sendXHR(type, url, data, callback) {
          newXHR = new XMLHttpRequest() || new window.ActiveXObject("Microsoft.XMLHTTP");
          newXHR.open(type, url, true);
          newXHR.send(data);
          newXHR.onreadystatechange = function() { // Use onreadystatechange instead onload.
            if (this.status === 200 && this.readyState === 4) {
              callback(this.response);
            }
          };
        }

        sendXHR("GET", "https://weerlive.nl/api/json-data-10min.php?key=demo&locatie=Amsterdam", null, function(response) {
          var data = JSON.parse(response);
          document.getElementById("output").innerHTML = data.liveweer[0].samenv;
        });
      }());

    </script>

    <div id="container">
      <div id="output">
      </div>


  </body>

</html>

[ Voor 44% gewijzigd door Verwijderd op 13-02-2019 23:26 ]

Onderwerpen

Vraag

Beste antwoord (via Verwijderd op 23-02-2019 17:32)

Alle reacties