PHP-Array in Javascript-Array umwandeln

lima-city → Forum → Programmiersprachen → PHP, MySQL & .htaccess

Autor dieses Themas

~~c*************h~~

18:21, 11.2.2012

Hallo, ich arbeite an einer Suche für meine Webseite und dort wird auf diese Weise eine Array aus den Daten einer DB erstellt

<?php
include ("db-verbindung.php");
$abfrage = "SELECT CONCAT(vorname, ' ', nachname) AS name FROM user";
$ergebnis = mysql_query($abfrage);
$userdaten = array();
while($row = mysql_fetch_assoc($ergebnis)) 
{$userdaten[] = $row;}
foreach ($userdaten as $useritem)
{echo "<br />".$userdaten['name']."\n";}
?>

Wie kann ich die Array $userdaten jetzt in eine Javascript-Array umwandeln?

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

18:30, 11.2.2012
Diesen Thread gibt es schon: Thread zum Thema.
Autor dieses Themas
~~c*************h~~

18:48, 11.2.2012
Habe ich auch schon gelesen gehabt!
Aber irgendwie steig ich da nicht durch!
Vielleicht kann ja mal jemand das für Dumme (mich) erklären!

anti-atomkraft

anti-atomkraft hat kostenlosen Webspace.

19:03, 11.2.2012

Hier mal die JSON-Variante...

PHP-Teil:

<?php
$array=Array();
$array['hallo']='Hallo, Welt!';
echo json_encode($array);

JavaScript-Teil (mit jQuery) :

var array;
$(document).ready( function(){
array = loadArray(); });

function loadArray(){
var arr = $.ajax('json.php', { async:false, type:'POST', cache:true }).responseText;
return $.parseJSON(arr); }

Autor dieses Themas
~~c*************h~~

19:20, 11.2.2012

Vielleicht kann ja mal jemand das für Dumme (mich) erklären!

Da bin ich ein totaler Anfänger!

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

20:05, 11.2.2012

carl-schoeneich schrieb:
Aber irgendwie steig ich da nicht durch!
Vielleicht kann ja mal jemand das für Dumme (mich) erklären!

Vollständiges Beispiel

<script type="text/javascript"><!--
<?php
	$array = array(1, 3, 7, 9, 13, 'test');
	$array['x'] = 'y';
	$json = json_encode($array);
?>
	var daten = <?php echo($json); ?>;
	for(var value in daten)
		document.write(value + ' = ' + daten[value] + '<br />');
--></script>

Die Übersetzung von $phparray => jsarray:

echo('var jsarray = '.json_encode($phparray).';');

Autor dieses Themas

~~c*************h~~

20:21, 11.2.2012

Irgendwie funktioniert das nicht!!!!
Also, ich kann es ja jetzt mal ganz genau machen!
Ich habe eine Suche damit der Administrator meiner Seite alle User suchen kann und verwalten kann!
In der extra Javascript-Datei steht dieser Code:

<!--
	
	var outp;
	var oldins;
	var posi = -1;
	var words = new Array();
	var input;
	var key;

	function setVisible(visi){
		var x = document.getElementById("shadow");
		var t = document.getElementsByName("name")[0];
		x.style.position = 'absolute';
		x.style.top =  (findPosY(t)+3)+"px";
		x.style.left = (findPosX(t)+2)+"px";
		x.style.visibility = visi;
	}
        
	function init(){
		outp = document.getElementById("output");
		window.setInterval("lookAt()", 100);
		setVisible("hidden");
		document.onkeydown = keygetter; //needed for Opera...
		document.onkeyup = keyHandler;
	}

	function findPosX(obj)
	{
		var curleft = 0;
		if (obj.offsetParent){
			while (obj.offsetParent){
				curleft += obj.offsetLeft;
				obj = obj.offsetParent;
			}
		}
		else if (obj.x)
			curleft += obj.x;
		return curleft;
	}

	function findPosY(obj)
	{
		var curtop = 0;
		if (obj.offsetParent){
			curtop += obj.offsetHeight;
			while (obj.offsetParent){
				curtop += obj.offsetTop;
				obj = obj.offsetParent;
			}
		}
		else if (obj.y){
			curtop += obj.y;
			curtop += obj.height;
		}
		return curtop;
	}
	
	function lookAt(){
		var ins = document.getElementsByName("name")[0].value;
		if (oldins == ins) return;
		else if (posi > -1);
		else if (ins.length > 0){
			words = getWord(ins);
			if (words.length > 0){
				clearOutput();
				for (var i=0;i<words.length; ++i) addWord (words[i]);
				setVisible("visible");
				input = document.getElementsByName("name")[0].value;
			}
			else{
				setVisible("hidden");
				posi = -1;
			}
		}
		else{
			setVisible("hidden");
			posi = -1;
		}
		oldins = ins;
	}
	
	function addWord(word){
		var sp = document.createElement("div");
		sp.appendChild(document.createTextNode(word));
		sp.onmouseover = mouseHandler;
		sp.onmouseout = mouseHandlerOut;
		sp.onclick = mouseClick;
		outp.appendChild(sp);
	}
	
	function clearOutput(){
		while (outp.hasChildNodes()){
			noten=outp.firstChild;
			outp.removeChild(noten);
		}
		posi = -1;
	}
	
	function getWord(beginning){
		var words = new Array();
		for (var i=0;i<suggestions.length; ++i){
			var j = -1;
			var correct = 1;
			while (correct == 1 && ++j < beginning.length){
				if (suggestions[i].charAt(j) != beginning.charAt(j)) correct = 0;
			}
			if (correct == 1) words[words.length] = suggestions[i];
		}
		return words;
	}
	
	function setColor (_posi, _color, _forg){
		outp.childNodes[_posi].style.background = _color;
		outp.childNodes[_posi].style.color = _forg;
	}
	
	function keygetter(event){
		if (!event && window.event) event = window.event;
		if (event) key = event.keyCode;
		else key = event.which;
	}
		
	function keyHandler(event){
		if (document.getElementById("shadow").style.visibility == "visible"){
		var textfield = document.getElementsByName("name")[0];
		if (key == 40){ //Key down
			//alert (words);
			if (words.length > 0 && posi < words.length-1){
				if (posi >=0) setColor(posi, "rgba(0,0,0,1)", "rgba(0,0,0,1)");
				else input = textfield.value;
				setColor(++posi, "rgba(153,153,153,1)", "rgba(255,255,255,1)");
				textfield.value = outp.childNodes[posi].firstChild.nodeValue;
			}
		}
		else if (key == 38){ //Key up
			if (words.length > 0 && posi >= 0){
				if (posi >=1){
					setColor(posi, "rgba(255,255,255,1)", "rgba(0,0,0,1)");
					setColor(--posi, "rgba(153,153,153,1)", "rgba(255,255,255,1)");
					textfield.value = outp.childNodes[posi].firstChild.nodeValue;
				}
				else{
					setColor(posi, "rgba(255,255,255,1)", "rgba(0,0,0,1)");
					textfield.value = input;
					textfield.focus();
					posi--;
				}
			}
		}
		else if (key == 27){ // Esc
			textfield.value = input;
			setVisible("hidden");
			posi = -1;
			oldins = input;
		}
		else if (key == 8){ // Backspace
			posi = -1;
			oldins=-1;
		}
		}
	}
	
	var mouseHandler=function(){
		for (var i=0;i<words.length;++i)
			setColor (i, "rgba(255,255,255,1)", "rgba(0,0,0,1)");
	
		this.style.background = "rgba(153,153,153,1)";
		this.style.color= "rgba(255,255,255,1)";
	}
	
	var mouseHandlerOut=function(){
		this.style.background = "rgba(255,255,255,1)";
		this.style.color= "rgba(0,0,0,1)";
	}
	
	var mouseClick=function(){
		document.getElementsByName("name")[0].value = this.firstChild.nodeValue;
		setVisible("hidden");
		posi = -1;
		oldins = this.firstChild.nodeValue;
	}

In der Suchdatei, die man eigentlich nur ändern muss ansich steht:

<?php
include ("db-verbindung.php");
include ("header.php");
if ($typ==3) {
unset ($row);
unset ($ergebnis);
unset ($abfrage);
echo "<h1>User suchen</h1>
<div id=\"Suche\">
<script type=\"text/javascript\">
	var suggestions = new Array('Carl','Hans','Alex');
	</script>
	<script type=\"text/javascript\" src=\"user-suchen.js\"></script>
	<form method=\"POST\" action=\"user-suchen.php\">
	<p>Suche:
	<input type=\"text\" name=\"name\" autocomplete=\"off\" style=\"width:200px\">
	<input type=\"submit\" value=\"Suchen\"></p>  
	</form>
	<div id=\"shadow\">
	<div id=\"output\">
	  </div>
	</div>
<script type=\"text/javascript\">init();</script>
</div>";}
else {echo "<meta http-equiv=\"refresh\" content=\"0; URL=index.php\">";}
?>

Das typ==3 steht dafür, dass nur der Admin diese Seite aufrufen kann!
Wie kriege ich es jetzt hinan der Stelle wo:

var suggestions = new Array('Carl','Hans','Alex');

steht die Variablen aus einer DB zu kriegen?

Das Ergebnis könnt ihr euch hier mal angucken:
http://carl-schoeneich.lima-city.de/Notensystem/user-suchen.php
Hinweis ihr seht es nur wenn ihr die vorgegeben Ergebnisse eingebt: Carl, Hans oder Alex!

Beitrag zuletzt geändert: 11.2.2012 20:32:23 von carl-schoeneich

anti-atomkraft

anti-atomkraft hat kostenlosen Webspace.

21:06, 11.2.2012

Mal deine Suchdatei angepasst und verschönert:

<?php
include ("db-verbindung.php");
include ("header.php");
if ($typ==3) {

$suggestions=Array(); // zu Testzwecken
$suggestion['test']='Hallo, Welt!';

unset ($row);
unset ($ergebnis);
unset ($abfrage);
?><h1>User suchen</h1>
<div id="Suche">
<script type="application/javascript">
	var suggestions = eval('(<?php echo json_encode($suggestions); ?>)'); // $suggestions durch Array-Namen ersetzen
	</script>
	<script type="text/javascript" src="user-suchen.js"></script>
	<form method="POST" action="user-suchen.php">
	<p>Suche:
	<input type="text" name="name" autocomplete="off" style="width:200px">
	<input type="submit" value="Suchen"></p>  
	</form>
	<div id="shadow">
	<div id="output">
	  </div>
	</div>
<script type="application/javascript">init();</script>
</div><?php }
else { ?><meta http-equiv="refresh" content="0; URL=index.php"><?php }

Autor dieses Themas
~~c*************h~~

21:45, 11.2.2012
Vielen, vielen Dank!!!!!
Das ist jetzt echt super!!!!

businesscard

businesscard hat kostenlosen Webspace.

22:58, 11.2.2012

Naja, also das ist sicherlich eine Variante...jedoch schön geschrieben finde ich das nicht.

Besser wäre das Javascript extern einzubinden und das json per ajax abzurufen. Das ist einerseits für die Übersicht in deinem PHP file besser (ohne die ganzen PHP-Schnipsel im Javascript), andererseits erhöht es die Wiederverwendbarkeit deiner PHP Funktionen. Auch bleibt eine gewisse Architektur gewahrt.

@carl-schoenreich: An sich solltest du glaube noch ein paar tutorials durchgehen, damit du später saubereren Code schreiben kannst

anti-atomkraft schrieb:
Mal deine Suchdatei angepasst und verschönert:

<?php
include ("db-verbindung.php");
include ("header.php");
if ($typ==3) {

$suggestions=Array(); // zu Testzwecken
$suggestion['test']='Hallo, Welt!';

unset ($row);
unset ($ergebnis);
unset ($abfrage);
?><h1>User suchen</h1>
<div id="Suche">
<script type="application/javascript">
	var suggestions = eval('(<?php echo json_encode($suggestions); ?>)'); // $suggestions durch Array-Namen ersetzen
	</script>
	<script type="text/javascript" src="user-suchen.js"></script>
	<form method="POST" action="user-suchen.php">
	<p>Suche:
	<input type="text" name="name" autocomplete="off" style="width:200px">
	<input type="submit" value="Suchen"></p>  
	</form>
	<div id="shadow">
	<div id="output">
	  </div>
	</div>
<script type="application/javascript">init();</script>
</div><?php }
else { ?><meta http-equiv="refresh" content="0; URL=index.php"><?php }

anti-atomkraft

anti-atomkraft hat kostenlosen Webspace.

23:23, 11.2.2012

businesscard schrieb:
Naja, also das ist sicherlich eine Variante...jedoch schön geschrieben finde ich das nicht.

Jo, hab' auch nur die nervigen echo()-Befehle entfernt...

hackyourlife

Moderator

hackyourlife hat kostenlosen Webspace.

11:12, 12.2.2012

anti-atomkraft schrieb:
Mal deine Suchdatei angepasst und verschönert:
...
	var suggestions = eval('(<?php echo json_encode($suggestions); ?>)'); // $suggestions durch Array-Namen ersetzen
...

Wozu eigentlich eval()? Es funktioniert doch so auch:

var suggestions = <?php echo(json_encode($suggestions)); ?>; // $suggestions durch Array-Namen ersetzen

Autor dieses Themas
~~c*************h~~

13:38, 12.2.2012
Trotzdem vielen vielen Dank an euch beide!!!!!
Habt mir echt weitergeholfen!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city