Hvordan bruker jeg JSON til å hente ut en array av filer?

[Kenny Bones]

Jeg prøver å bruke jPlayer (javascript-basert mp3-spiller) som tillater at jeg lager spillelister med mp3-filer f. eks. Problemet er at rett ut av boksen så er det statisk feed av filer den bruker. Jeg ønsker at det skal være dynamisk, at den henter ut alle lydfilene fra en gitt mappe. Men av denne mappen varierer ut fra en variabel som mates ut på nettsiden i en div.

 

Jeg har funnet litt av hvert av info om akkurat dette, men jeg klarer ikke å se sammenhengen helt.. Blir litt forvirret av javascript, ajax-calls til php, returnering av data. Og dette med JSON i tillegg.

 

Så fant jeg et spørsmål på stackoverflow som er nøyaktig det samme som jeg lurer på.

http://stackoverflow...in-jplayer?rq=1

 

F. eks skal følgende kodesnutt gjøre det jeg er ute etter:

$(document).ready(function(){
var cssSelector = {
	jPlayer: "#jquery_jplayer_1",
	cssSelectorAncestor: "#jp_container_1"
};
var playlist = []; // Empty playlist
var options = {
	swfPath: "./js",
	supplied: "mp3"
};
var myPlaylist = new jPlayerPlaylist(cssSelector, playlist, options);
$.getJSON("../PHP/radio.php",function(data){  // get the JSON array produced by my PHP
	$.each(data,function(index,value){
		myPlaylist.add(value); // add each element in data in myPlaylist
	})
});
});

 

Denne koden klarer jeg fint å lese og forstå basicen av. I $.getJSON så sendes med et objekt (data) som deretter sendes tilbake etter å ha blitt behandlet i php-filen. Så kjøres en loop hvor hver del av arrayen som er mottatt blir feedet inn i myPlaylist.add(value).

 

Det jeg ikke forstår er følgende, hva i all verden skal stå i den php-filen hvor $.getJSON står? Hvordan returnerer jeg objektet? Og hvordan sender jeg med en variabel inn? Jeg må jo lissom sendes med variabelen med mappen jeg vil søke etter mp3-filer inn i $.getJSON. Akkurat denne biten mangler før jeg forstår hvordan det hele henger sammen. Kan jeg bare gjøre det slik?

 

var folder = "http://somewebaddress.com/folder"
$.getJSON("../PHP/radio.php",function(data, folder)

 

Jeg må jo sannsynligvis behandle strengen først også, før den sendes tilbake? jPlayer bruker samme format som JSON ser det ut som.

var playlist = [{"title":"Kalimba","mp3":"/path/to/mydirectory/Kalimba.mp3"},{"title":"Maid with  the Flaxen Hair","mp3":"/path/to/mydirectory/Maid with the Flaxen Hair.mp3"},{"title":"Sleep Away","mp3":"/path/to/mydirectory/Sleep Away.mp3"}];

 

Kan jeg bruke POST for å hente opp variabelen i PHP-filen? Som dere kanskje forstår mangler jeg en god del grunnleggende for å drive med dette. Men jeg vil bare få opp en løsning, og jeg er mer designer, css og hobbykoder med visual basic, enkel vba og vb.net til vanlig. Og dette blir litt mer komplisert enn jeg er vant til. Har forsøkt å søke rundt omkring, men jeg finner lissom ingenting som fester seg i teflon-hodet mitt

 

Edit: Kanskje jeg ikke engang trenger å bruke JSON.

Jeg vet bare at jeg må bruke jPlaylister for å få til dette.

Endret 13. februar 2013 av Kenny Bones

[Crowly]

Du kan bytte ut $.getJSON med $.post

http://api.jquery.com/jQuery.post/

var folder='en_eller_annen_mappe';

$.post("../PHP/radio.php",{'folder':folder},function(data){  
$.each(data,function(index,value){
	myPlaylist.add(value); // add each element in data in myPlaylist
})
},'json');

 

PHP, ikke tatt hensyn til sikkerhet!

header('Content-type: application/json');

if (false !== ($files=glob($_POST['folder'].'/*.mp3'))) {
// json_encode krever at tekst er i UTF-8
foreach ($files as $f) $json[]=utf8_encode($f);
}
else
$json=false;

echo json_encode($json);

Endret 14. februar 2013 av Crowly

[Kenny Bones]

Jeg kom et lite stykke lengre ihvertfall! Men jeg mistenker at det er noe feil med returneringen av stringene. Fordi jeg får tilbake en haug med arrays som egentlig er hver bokstav i hele dokumentet. Som da vil si koden til nettsiden. Om jeg legger på en breakpoint på scriptet og sjekker hva data er, i $.post("../PHP/radio.php",{'folder':folder},function(data) så ser det ut som at (data) inneholder hele siden jeg er på. Vet ikke om dette er årsaken til feilen men

[Crowly]

Prøve dette

header('Content-type: application/json');
if (false !== ($files=glob($_POST['folder'].'/*.mp3'))) {
	// json_encode krever at tekst er i UTF-8
	foreach ($files as $f) {
		$json[]=array(
			'mp3'=>utf8_encode($f),
			'title'=>utf8_encode(basename($f))
		);
	}
}
else
	$json=false;

echo json_encode($json);

 

Kan også være lurt å åpne php fila direkte i nettleseren, for så sjekke hva slags json streng du får. Da må du nok manuelt sette en verdi i $_POST['folder'] eller hardkode en path i stedet for $_POST['folder'].

 

Du kan også legge inn console.log(data) i javascriptet, for så å sjekke det i consolet i Firebug/Operas Dragonfly o.l.

$.post("../PHP/radio.php",{'folder':folder},function(data){  
	console.log(data); // debugging
	$.each(data,function(index,value){
		myPlaylist.add(value); // add each element in data in myPlaylist
	});
},'json');

Endret 14. februar 2013 av Crowly

[Kenny Bones]

Ok, flotte tips! Spesielt det med å vise php-filen alene, og kjøre egne outputs. Så mye enklere å isolere problemer på! Viser seg også at jeg ikke kunne bruke http:// som sti mot mappen jeg vil søke etter. Måtte faktisk bruke /home/ etc.

 

Bruker denne koden for å søke etter filene nå:

<?php
header('Content-type: application/json');
$_POST['folder'] = "/home/admin/public_html/Site/mp3/";
$folderurl = $_POST['folder'];
$handler = opendir($folderurl);
while ($file = readdir($handler)) {
if ($file != "." && $file != "..") {
 $json[]=array(
  'title'=>utf8_encode(basename($file)),
  'mp3'=>utf8_encode($file),
 );
}
}
closedir ($handler);
echo json_encode($json);
?>

 

Da returnerer den følgende streng:

[{"title":"untitled.mp3","mp3":"untitled.mp3"}]

 

Med andre ord fungerer ikke utf8_encode(basename($file)). Men det er ikke så utrolig viktig egentlig. Kan alltids rense strengen etterhvert.

[Crowly]

Du kan teste denne varianten, den scanner igjennom alle under mapper også.

 

PHP, dette fungerte greit når jeg scannet igjennom min musikk samling.

header('Content-type: application/json');
try {
$path='/home/admin/public_html/Site/mp3/';
$dir_iterator = new RecursiveDirectoryIterator($path);
$iterator = new RecursiveIteratorIterator($dir_iterator, RecursiveIteratorIterator::SELF_FIRST);

$json=array();

foreach ($iterator as $file) {
	if ($file->isFile() and $file->getExtension()=='mp3') {
		$json[]=array(
			'title'=>utf8_encode($file->getBasename('.'.$file->getExtension())),
			'mp3'=>utf8_encode(str_replace($path,'',$file->getPathname())),
		);
	}
}
}
catch (exception $e) {
$json['err']=utf8_encode($e->getMessage());
}
echo json_encode($json);

 

json output

[{"title":"01 Running Riot","mp3":"Iron Savior\/2007 - Megatropolis\/01 Running Riot.mp3"},{"title":"02 The Omega Man","mp3":"Iron Savior\/2007 - Megatropolis\/02 The Omega Man.mp3"},{"title":"03 Flesh","mp3":"Iron Savior\/2007 - Megatropolis\/03 Flesh.mp3"},{"title":"04 Megatropolis","mp3":"Iron Savior\/2007 - Megatropolis\/04 Megatropolis.mp3"}]

 

jQuery, fjernet folder siden det er hardkodet over. Dette er ikke testet.

$.post("../PHP/radio.php",function(data){
$.each(data,function(index,value){
	if (index=='err')
		alert(value);
	else
		myPlaylist.add(value); // add each element in data in myPlaylist
});
},'json');

Endret 14. februar 2013 av Crowly

[Kenny Bones]

Aner ikke hvordan jeg skal få takket deg! Dette er suverent! Jeg trenger ikke scanne undermapper for denne løsningen jeg bruker. Men dette kan komme hendig til uansett