probleem php string overbrengen naar javascript

Door Fabian W op 25-01-2015 17:42

2.781 views

Met een form genereer ik een spotify json url.
Op submit wil ik twee dingen doen:
- met file_get_contents de content van deze url ophalen
- deze content als input gebruiken voor een javascript functie die vervolgens de json data output in een html table.

Deze twee handelingen lopen niet synchroon. D.w.z. Op submit neemt het javascript niet de gegevens mee die in php bewerkt zijn.
Ik heb geprobeerd om dit probleem op te lossen met json_encode of $_ajax, maar kom hier niet uit. Zou iemand me hiermee kunnen helpen? De code staat hieronder.

html:


<script type="text/javascript" src="spotify.js"></script>
<form id="spotifyform" action="spotifylist.php" method="post">
      <select id="country" name="country">
        <option value="GB">UK</option>
        <option value="US">USA</option>
      </select>
      <select id="interval" name="interval">
        <option value="daily">Daglijst</option>
        <option value="weekly">Weeklijst</option>
      </select>
      <select id="chart" name="chart">
        <option value="most_streamed">Meest gestreamd</option>
        <option value="most_viral">Meest gedeeld</option>
      </select>
      <input type="submit" name="formSubmit" value="Submit"/>
</form>
<div id="spotifylist"></div>

spotify.js:


function loadJSON()
{
    var http_request = new XMLHttpRequest();
    try{
      // Opera 8.0+, Firefox, Chrome, Safari
      http_request = new XMLHttpRequest();
    }catch (e){
      // Internet Explorer Browsers
      try{
         http_request = new ActiveXObject("Msxml2.XMLHTTP");
      }catch (e) {
         try{
            http_request = new ActiveXObject("Microsoft.XMLHTTP");
         }catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
         }
      }
    }

   http_request.open("GET", "spotifylist.php", true);
   http_request.send();
   http_request.onreadystatechange  = function(){
      if (http_request.readyState == 4  )
      {
        // Javascript function JSON.parse to parse JSON data
        var jsonObj = JSON.parse(http_request.responseText);

        // jsonObj variable now contains the data structure and can
        // be accessed as jsonObj.artist_name and jsonObj.track_name.

        HTML = "<table id='chart'> <thead><tr id='row2'><th id='dw'></th><th   id='song'>Artiest</th><th id='song'>Titel</th></tr></thead><tbody>";
        var x=jsonObj.tracks;
        for (i=0;i<x.length;i++)
          { 
        HTML += "<tr id='row1'><td id='dw'>";
        HTML += i+1;
        HTML += "</td><td id='song'>";
        HTML += x.artist_name;
        HTML += "</td><td id='song'>";
        HTML += x.track_name;
        HTML += "</td></tr>";
          }
        HTML += "</tbody></table>";

        document.getElementById("spotifylist").innerHTML = HTML; 

      }
    }
 }

$("#spotifyform").submit(function(){
    loadJSON();
    return false;
});

spotifylist.php
[code]
<?php
if($_POST['formSubmit'] == "Submit")
{
$chart = $_POST['chart'];
$country = $_POST['country'];
$interval = $_POST['interval'];
}

$data_file="http://charts.spotify.com/api/tracks/".$chart."/".$country."/".$interval."/latest";
$url = file_get_contents ($data_file);
echo $url;
?>

Thomas van den Heuvel

26-01-2015 15:39

Wat is de URL die je aanroept, want zoals ik eerder aangaf geven alle URL's die niet een lijst van tracks retourneren JSON terug, in plaats van callback_functie(JSON). In dat eerste geval wordt geen callback-functie getriggerd, en daarmee ook 'success' niet.

Voeg dat 'error' stuk uit mijn bovenstaande code eens toe? Krijg je dan een melding 'jQueryXXX_YYY was not called'?

Plak je ook '?callback=?' aan je uiteindelijke URL zoals ik hierboven doe?

Fabian W

26-01-2015 15:41 gewijzigd op 26-01-2015 15:47

Zo heb ik het nu:


// deze functie wordt automatisch aangeroepen als de pagina geladen is.
window.onload = function loadJSON()
{
  // de HTML-elementen waar we een gebeurtenis van willen registreren of waaraan we iets willen wijzigen.
  var country2 = document.getElementById("country");
  var chart2 = document.getElementById("chart");
  var interval2 = document.getElementById("interval");
  var button = document.getElementById("go_button");

  // we maken een functie die aangeroepen moet worden als er op de button geklikt wordt
  $("#spotifyform").submit(function()
  {
	// we slaan de gekozen optie van de <select> country op in een variabele met de naam country2
	var country = country2.options[country2.selectedIndex].value;
	var chart = chart2.options[chart2.selectedIndex].value;
	var interval = interval2.options[interval2.selectedIndex].value; 

	var url = "http://charts.spotify.com/api/tracks/" + chart + "/" + country + "/" + interval + "/latest";
	
	// haal de data op van de url en sla deze op in de variabele data
	$.ajax({
	  'url':      url + '?callback=?',
	  'dataType': 'jsonp',
	  'error':    function(xhr, status, error) 
	  {
		alert(error.message);
	  },
	  'success':  function(json) 
	  {
		alert(json); // geeft [object Object] terug, omdat het resultaat een JSON object is
        console.log(json); // als je bijvoorbeeld FireBug gebruikt, kun je in je console de structuur bekijken
        
		// Javascript function JSON.parse to parse JSON data
		var jsonObj = JSON.parse(json);
		
		// jsonObj variable now contains the data structure and can
		// be accessed as jsonObj.artist_name and jsonObj.track_name.
	
		HTML = "<table id='chart'> <thead><tr id='row2'><th id='dw'></th><th id='song'>Artiest</th><th id='song'>Titel</th></tr></thead><tbody>";
		var x=jsonObj.tracks;
		for (i=0;i<x.length;i++)
		  { 
		  HTML += "<tr id='row1'><td id='dw'>";
		  HTML += i+1;
		  HTML += "</td><td id='song'>";
		  HTML += x[i].artist_name;
		  HTML += "</td><td id='song'>";
		  HTML += x[i].track_name;
		  HTML += "</td></tr>";
		  }
		HTML += "</tbody></table>";
		 
		document.getElementById("spotifylist").innerHTML = HTML; 
		
	  } // succes ajax
    }); // $.ajax
  }); // form submit
} // window on load

EDIT: Ik heb dus die errormelding erin staan. De callback ook, precies zoals in jouw code.
Overigens krijg ik geen errormeldingen van chrome. Ook niet in de console.

Thomas van den Heuvel

26-01-2015 15:55

Voor sommige combinaties lijken er geen resultaten te zijn, zo is er geen resultaat voor http://charts.spotify.com/api/tracks/most_viral/gb/daily/latest - voor most_viral lijkt alleen de weekly variant gevuld. Dit wordt blijkbaar niet fout gerekend, je krijgt gewoon een leeg resultaat retour.

Ik zou trouwens je landencodes aanpassen naar een lowercase variant, conform de API.

Fabian W

26-01-2015 16:00 gewijzigd op 26-01-2015 16:05

Nee oke dat weet ik. Maar bij mij toont hij ook geen resultaten voor de combinaties die wel mogelijk zijn. Uppercase/lowercase zou niet uit moeten maken, maar ik zal desalniettemin toch eens kijken.

EDIT: de landen in lowercase letters veranderd. Nog steeds geen resultaat.
Het enige wat gebeurt is de url in de browser die ?country=nl.... toevoegt.

Thomas van den Heuvel

26-01-2015 16:19

Geef eens een voorbeeld van een niet-werkende URL, zie je in je network-tab wel een GET-request naar deze pagina? Hoe ziet de response hiervan uit?

Fabian W

26-01-2015 16:31

In de network-tab zie ik idd een get request naar deze url:
spotify.php?country=nl&interval=daily&chart=most_streamed&formSubmit=Submit

Ook is de status gewoon 200. Dat zou niet moeten als hij niks laadt in de div.

Thomas van den Heuvel

26-01-2015 16:41

:)

De URL waarmee je de API uiteindelijk aanspreekt, obviously.

Heb je al geprobeerd rijen / kolommen te debuggen met console.log()?
Wellicht gaat er in jouw geval iets mis met JSON.parse()?

Anyway, dit werkt voor mij:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Spotify test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>

<body>
<div id="spotify"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
    // stel hier je URL samen
    var url = 'http://charts.spotify.com/api/tracks/most_streamed/global/daily/latest'; // werkt
    // var url = 'http://charts.spotify.com/api/tracks/most_viral/global/weekly/2015-01-11'; // werkt
    // var url = 'http://charts.spotify.com/api/tracks/most_viral/global/weekly/'; // werkt niet

    $.ajax({
        'url':      url + '?callback=?',
        'dataType': 'jsonp',
        'error':    function(xhr, status, error) {
            alert(error.message);
        },
        'success':  function(json) {
            var html = '<table>';
            // traverse tracks
            $.each(json.tracks, function() {
                // traverse track rows
                html += '<tr>';
                $.each(this, function(k, v) {
                    if (k == 'track_name' || k == 'artist_name') {
                        html += '<td>'+v+'</td>';
                    }
                });
                html += '</tr>';
            });
            html += '</table>';
            $('#spotify').append(html);
        }
    }); // $.ajax
}); // ready
//]]>
</script>
</body>
</html>

Fabian W

26-01-2015 16:45

Thomas van den Heuvel op 26/01/2015 16:41:53

Heb je al geprobeerd rijen / kolommen te debuggen met console.log()?
Wellicht gaat er in jouw geval iets mis met JSON.parse()?

Hoe werkt dat?

[size=xsmall]Toevoeging op 26/01/2015 16:55:44:[/size]

EDIT: Als ik de JSON parse en het maken van die html table weghaal en dat stukje op jouw manier doe, werkt de code ook niet. De fout zit hem denk ik in het informatie van het form halen.

Thomas van den Heuvel

26-01-2015 16:57 gewijzigd op 26-01-2015 17:03

Okay, je bent een JavaScript applicatie aan het maken, maar je weet niet hoe je deze moet debuggen :(.

Vroegah gebruikte men meestal alert() om van alles te dumpen, maar dat is een beetje onpraktisch omdat dat de uitvoering staakt. Tegenwoordig is daar console.log().

Met console.log() dump je data naar je console (F12, console tab). Zoiets dus:

...
'success':  function(json) {
    // traverse tracks
    $.each(json.tracks, function(r) {
        // traverse track rows
        console.log('row '+r); // dump row number
        $.each(this, function(k, v) {
            if (k == 'track_name' || k == 'artist_name') {
                console.log(k+' '+v); // dump artists and track names
            }
        });
    });
}
...

EDIT: Er lijkt nog iets anders aan de hand te zijn: als je een URL aanroept met ?callback=... dan geeft spotifiy een document terug met text/html als MIME-type in plaats van (een) JSON (callback). LOL.

Fabian W

26-01-2015 17:08

Dat levert geen fouten op in mijn console (F12, console). Hier zal de fout niet zitten denk ik.

[size=xsmall]Toevoeging op 26/01/2015 17:09:06:[/size]

Thomas van den Heuvel op 26/01/2015 16:57:33

EDIT: Er lijkt nog iets anders aan de hand te zijn: als je een URL aanroept met ?callback=... dan geeft spotifiy een document terug met text/html als MIME-type in plaats van (een) JSON (callback). LOL.

Dat zag ik ook idd. Maakt dat nog iets uit?

[size=xsmall]Toevoeging op 26/01/2015 17:10:52:[/size]

Heb jij hem wel werkend inclusief form?
Want zonder form kan ik hem ook wel werkend krijgen dat is geen probleem.

Reageren

Inloggen om te reageren