JavaScript GET request mit der Youtube API

DreamGamer · 11. Juni 2017

Hallo, Ich habe eine Frage / Problem. Und zwar ich möchte gerne auf meiner Webseite meine letzten 5 Hochgeladenen Videos darstellen dies aber nicht immer per Hand updaten. Dafür gibt es ja die Youtube Data API. Diese möchte ich dafür auch benutzen und es gibt ja bei google so eine tolle Seite wo man die GET request einfach erstellen lassen kann. Dies habe ich gemacht meine sieht jetzt wie folgt aus:

Code:

GET https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCtC7I5vd20_SB76sZNNKxsA&maxResults=25&q=fishing&key={YOUR_API_KEY}

Nun ist mein Problem bei der Google Seite kommt als Antwort: "200 OK". Aber wenn ich das Skript ausführe kommt:

Code:

{
 "error": {
  "errors": [
   {
    "domain": "usageLimits",
    "reason": "keyInvalid",
    "message": "Bad Request"
   }
  ],
  "code": 400,
  "message": "Bad Request"
 }
}

Anmerkung natürlich habe ich meinen Key eingefügt und die klammern weg gemacht ^^
Woran liegt es dass ich bei mir einer Fehler Meldung bekomme aber bei Google nicht?

Achja so sieht außerdem mein Script aus:

Code:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
   $.get("https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCtC7I5vd20_SB76sZNNKxsA&maxResults=5&q=fishing&key=KEY", function( data ) {
    alert("Data Loaded: " + data);
    console.log("Data Loaded: " + data);
  });
});
</script>
</head>
<body>
</body>
</html>

Ich hoffe ich habe alles geschrieben was man wissen muss.
Freue mich über Hilfe

LG DreamGamer

Zonk91 · 11. Juni 2017

Schwer zu sagen woran es liegt. Hast alle Schritte von dem offiziellem Guide von Google https://developers.google.com/youtube/v3/getting-started nochmal überprüft.

DreamGamer · 11. Juni 2017

Ja ich habe alles außer Client Library denn wenn ich es richtig verstanden habe sind dies nur Examples und diese funktionieren bei mir irgendwie nicht. Bei jedem Script soll man sich einloggen dann ist dort der "Authorize" Button aber wenn ich diesen Drücke passiert nichts habe aber auch keine Fehlermeldungen bei dem Example code. Hier die Seite wie es aussieht und auch wie die Console aussieht. Dies hat zwar nicht viel mehr mit meiner Frage zu tun aber dies auf jedenfall warum ich Client Library nicht so stark beachtet habe. Webseite: http://beta.dreamgamer.de/test.php

kling1 · 11. Juni 2017

kp woran das genau liegt.. aber du brauchst heut zu tage nicht unbedingt jquery.. vll einfach mal mit vanilla javascript probieren.. habe das gerade ausprobiert und es ging

Code:

const key = 'my key'
const url = 'https://www.googleapis.com/youtube/v3/search?part=snippet&channelId=UCtC7I5vd20_SB76sZNNKxsA&maxResults=25&q=fishing&key='

fetch(url + key).then(response => response.json()).then(data => {
  console.log(data)
})

DreamGamer · 11. Juni 2017

Habe es gerade ohne Jquery probiert mit dem Code den du dazu gepostet hast. Immernoch der selbe Fehler. Heißt dies das es am Key liegt? Ich hatte erst Probleme mit dem Key war dan stackoverflow in der google abteilung und dort wurde mir gesagt ich sollte einfach einen neuen Key erstellen dieser hat dann funktioniert. Achja hier nochmal der Fehler Code ist zwar der selbe aber:

Code:

{
 "error": {
  "errors": [
   {
    "domain": "usageLimits",
    "reason": "keyInvalid",
    "message": "Bad Request"
   }
  ],
  "code": 400,
  "message": "Bad Request"
 }
}

kling1 · 11. Juni 2017

jepp sieht danach aus

DreamGamer · 11. Juni 2017

Problem gefunden ._. Ich habe den OAuth-2.0-Client-Schlüssel genommen brauchte aber den API Key. Bei anderen sachen brauchte ich nämlich immer den anderen. Jetzt noch eine etwas dümmere Frage. Wie lese ich eig. die Informationen aus die ich über GET abfrage? Habe damit noch nie gearbeitet kennt jemand eine gute seite die dies erklärt oder kann mir dies jemand erklären?

r15ch13 · 11. Juni 2017

Die Variable data enthaellt ein JSON Objekt.

Ich nehm jetzt mal das Fehlerobjekt als Beispiel. So kannst du dich durch den Inhalt hangeln:

Code:

console.log(data.error.errors[0].reason); // keyInvalid
console.log(data.error.code); // 400

DreamGamer · 12. Juni 2017

Ok Danke

Habe jetzt alles geschafft jetzt wird alles dargestellt wie ich es wollte bin wärenddessen zu PHP umgestiegen. Jetzt habe ich nurnoch ein Problem es gibt ja diesen GET URL generator: "https://developers.google.com/apis-explorer/#p/youtube/v3/youtube.search.list?part=snippet&channelId=UCtC7I5vd20_SB76sZNNKxsA&maxResults=25&q=surfing&_h=3&" mein Problem. Egal was ich dort mache endweder wird garkein video weiter gegeben oder nur eins. Obwohl auf meinem Kanal mehr als 200 Videos sind. Was mache ich falsche?

r15ch13 · 12. Juni 2017

Bei mir meckert er wegen maxResults=2 5, sollte wohl maxResults=25 sein. Ausserdem suchst du nach surfing mit &q=surfing und gibts nur ein Ergebnis bei deinem Channel

Dies hier sollte dir 25 Videos liefern:
https://developers.google.com/apis-...=UCtC7I5vd20_SB76sZNNKxsA&maxResults=25&_h=6&

DreamGamer · 12. Juni 2017

Danke

Es funktioniert aber warum werden auch Playlisten angezeigt kann man diese irgendwie rauswerfen? Habe geschaut wenn ich mache das nur Videos angezeigt werden die Embeddable sind. Kommt ein Fehler. Gibt es dort irgendeinen weg denn dieser funktioniert bei mir irgendwie nicht so ganz.

r15ch13 · 12. Juni 2017

Setz mal type auf video, dann sollte es gehen.

DreamGamer · 12. Juni 2017

Danke

Es hat funktioniert es. Danke für die Hilfe

ich wäre noch daran verzweifelt weil man dazu nichts im Internet finden jedenfalls habe ich nichts gefunden ^^

Also danke für die Schnelle und gute Hilfe

Suche

JavaScript GET request mit der Youtube API

DreamGamer

Lieutenant

Zonk91

Cadet 4th Year

DreamGamer

Lieutenant

kling1

Gast

DreamGamer

Lieutenant

kling1

Gast

DreamGamer

Lieutenant

r15ch13

Lieutenant

DreamGamer

Lieutenant

r15ch13

Lieutenant

DreamGamer

Lieutenant

r15ch13

Lieutenant

DreamGamer

Lieutenant

Ähnliche Themen