✔ JavaScriptJson

O

Operaiter

Mitglied
Hallo alle zusammen,

ich programmiere seit einigen Wochen mit JavaScript und mit JQuery und irgendwie bin ich nun auf die total verrückte Idee gekommen etwas zu tun wo ich nicht so wirklich viel Ahnung habe.

Nun ja ich langweile euch jetzt mal nicht mit weiteren langen Details... Kurzfassung:

Ich habe ein Array in PHP und würde dieses nun gerne in Javascript benutzen.

Durch Google bin ich nun auf die Idee gekommen per json.encode ein json string zu erhalten den ich dann in JS wieder zu einem Array decodieren kann.

Nach folgendem Codebeispiel habe ich also nun alles mal aufgebaut:
PHP: 
<?php
$sql = "SELECT comment_ID, comment_content FROM `01_pic_comments` WHERE `comment_post_id` = 30 AND `comment_approved` = '1'";

$result = mysql_query($sql);
 $rows = array();
   while($r = mysql_fetch_assoc($result)) {
     $rows['object_name'][] = $r;
   }

 print json_encode($rows);
  ?>
 
 <script language="javascript">
    
     
     var errors = new Array(); 
     var errors = '<?php echo json_encode($rows); ?>';
     console.log(errors[1]);
 </script>

print json_encode gibt {"object_name":[{"comment_ID":"2","comment_content":"Bla1"},{"comment_ID":"3","comment_content":"Bla2"},{"comment_ID":"4","comment_content":"Bla3"},{"comment_ID":"5","comment_content":"bla4"}]} aus

console.log gibt mir " aus. (Kein Tippfehler ich meine wirklich das hochgestellte Anführungszeichen)

Erwartet: 2: Bla1
Daran sitze ich nun seit ca. zwei Wochen und weiß einfach nichtmehr weitere. Aus dem Grund wende ich mich an euch!

Ich wäre sehr dankbar wenn ihr mir einen Tipp nennen könntet mit dem ich nun dochmal wieder weiterkomme!

Ich danke euch im Vorraus!
LG OP
 
In JavaScript hast du dein JSON nur als String und dieser hat an der zweiten Stelle eben ein ". Außerdem ist das JSON kein Array, sondern ein Objekt.

Javascript: 
//Vorher
var errors = new Array(); 
var errors = '<?php echo json_encode($rows); ?>';
console.log(errors[1]);

//Nachher
var errors = <?php echo json_encode($rows); ?>;
console.log(errors.object_name[1]);
 
Hallo CPoly,
danke für deine schnelle Antwort?

Gibt es denn eine möglichkeit daraus wieder ein Array zu machen Cpoly?

Ich wäre auch für jede alternative offen ;-)
 
Naja, das Array verbirgt sich doch direkt hinter dem "object_name" Schlüssel:

Javascript: 
var errors = <?php echo json_encode($rows); ?>;
errors = errors.object_name;
 
CPoly,

ich bin mir gerade nicht sicher ob ich das so richtig verstanden habe... :-/ Erstnochmal vielen Dank! Ich habe schon das Ziel ich komme meinem Ziel immer näher! Natürlich will ich mir meine Arbeit nicht von dir verrichten lassen aber scheinbar habe ich da doch einen ganz gravierenden Punkt bei JS noch nicht verstanden.

Ich hab den Code nun mal wie von dir vorgeschlagen umgebaut!

PHP: 
     console.log(errors[2]);
     alert(errors[2]);

Geben jedochzwei föllig verschiedene Ergebnisse wieder. Kannst du mir dazu vielleicht noch einen weiteren Tipp geben?

console.log: Object { comment_ID="4", comment_content="Bla3"}
alert: [object Object]
 
Zuletzt bearbeitet von einem Moderator:
alert gibt nur Strings aus und deshalb wird die toString-Methode des Objektes ausgeführt. Diese gibt eben "[object Object]" zurück. Console.log hingegen kann beliebige Objekte ausgeben.
 
...okay ich glaube so komme ich nicht weiter.

Mir fehlt für mein Projekt glaube ich zuviel Grundwissen in JavaScript. Vielleicht könnt ihr mir sagen ob meine Idee auf diese Art und Weise überhaupt umsetzbar ist... oder mir einen alternativ Weg anbieten.
Ich möchte nicht das ihr mir jetzt hier meinen Kram baut. Das Projekt dient ja dazu das ich mehr praxis Erfahrung sammle... nur komme ich einfach nicht weiter.

Projekt: Ich arbeite an einem Kommentierungssystem welches die Kommentare um ein Bild herum zufällig anordnet.

Dabei werden per PHP While divs erzeugt (CSS visible:hide) , deren Position anschließend mit Javascript verändert werden soll.

Die DIV's haben folgenden aufbau:
PHP: 
    echo '<div class="comment-cloud" id="comment-cloud-'.$row['comment_ID'];.'" style="position:absolute; top:20; left:70;">
                    <div class="comment">
                        '.$row["comment_content"].'
                    </div>
                    <div class="info">
                        <span class="comment_author">
                            '.$row["comment_author"].'
                        </span>
                        <span class="comment_date">
                            '.$row["comment_date"].'
                    </div>
            </div>';

Die ID jedes DIV's ist einmalig und einem Kommentar zuordbar.

Nun muss ich eine Liste von ID's an Javascript übergeben die in JavaScript in einer Schleife abgearbeitet werden und nacheinander die Position der DIV's verschiebt.

Da ich in PHP bereits an Array habe dachte ich wäre es das einfachste das Array in Javascript zu transferieren.

Dort würde eine Schleife so oft ausgeführt werden wie mein Array Zeilen hat, und nacheinander die ID's der Kommentare ausspucken.

Durch Google bin ich irgendwie auf JSON gestoßen als Interface zwischen PHP und Javascript. Ist das denn überhaupt alles so möglich wie ich mir das vorstelle oder bin ich gerade auf dem totalen Holzpfad?

Bin über jegliches Feedback dankbar!
LG OP
 
Viel einfacher:

Javascript: 
var alle = document.querySelectorAll('.comment-cloud');

//Jetzt hast du alle Container

for(var i = 0; i < alle.length; i++) {
    //alle[i]
}

Wenn du auch IE 6 & 7 unterstützen willst, musst du das noch anpassen, weil die kein querySelectorAll kennen.
 
mhmmmm das sieht um einiges einfacher aus, aber ich verstehe das irgendwie nicht :-/ JavaScript ist für mich die schwerste Sprache die ich bisher lerne. Bei PHP und C++ war das irgendwie alles übersichtlicher. Ich dachte JS wäre ein kleiner spaß den man mal so nebenbei lernt.
Ich drehe mich ständig im Kreis und stelle fest das ich diese Lösung nicht verstehe weil mir hier und da etwas fehlt und wenn ich dann danach google verstehe ich es wieder nicht weil ich hier und da wieder etwas nicht kenne.

Ich habe deinen Code nun wiefolgt angepasst:
Code: 
var comment_ID = document.querySelectorAll('.comment-cloud'); 
//Jetzt hast du alle Container 
for(var i = 0; i < comment_ID.length; i++) {
    console.log(i);
    var name = 'comment-cloud-' + i + '';
    console.log(name);
    getElementById(name).style.top = 400;
}

Ziel des Posts: Alle DIVS erstmal alle in der Höhe verschieben. Zufallsgenerator für die Höhe binde ich einfach später ein...

Nun schaue ich mir das ganze in der console.log an:

console.log(i) : 0
console.log(name) : comment-cloud-0

Im nächsten Schritt würde ich nun gerne per getElementByID(comment-cloud-0) den Abstand des Objektes nach oben anpassen. (.style.top = 400) aller dings sagt console.log: getElementById is not defined

Ein Blick in den Seitenquelltext zeigt mir das es garkein comment-cloud-0 Element gibt:

PHP: 
<div class="comment-cloud" id="comment-cloud-2" style="position:absolute; top:70px; left:70px;">
                    <div class="comment">
                        Bla1
                    </div>
                    <div class="info">
                        <span class="comment_author">
                            chrono
                        </span>

                        <span class="comment_date">
                            2012-03-01 13:10:04
                    </div>
            </div>
<div class="comment-cloud" id="comment-cloud-3" style="position:absolute; top:70px; left:70px;">
                    <div class="comment">
                        Bla2
                    </div>
                    <div class="info">
                        <span class="comment_author">
                            chrono
                        </span>

                        <span class="comment_date">
                            2012-03-01 13:10:11
                    </div>
            </div><div class="comment-cloud" id="comment-cloud-4" style="position:absolute; top:70px; left:70px;">
                    <div class="comment">
                        Bla3
                    </div>
                    <div class="info">
                        <span class="comment_author">
                            chrono
                        </span>

                        <span class="comment_date">
                            2012-03-01 13:10:20
                    </div>
            </div>
<div class="comment-cloud" id="comment-cloud-5" style="position:absolute; top:70px; left:70px;">
                    <div class="comment">
                        bla4
                    </div>
                    <div class="info">
                        <span class="comment_author">
                            chrono
                        </span>

                        <span class="comment_date">
                            2012-03-01 13:10:30
                    </div>
            </div>

Ich weiß jetzt einfahc nichtmehr weiter. Bin ich jetzt wieder einfach zu doof dafür? Kommt jetzt wieder eine Zeile Code von dir die mir zeigt wie dämlich ich bin?

Vielleicht mal nebenbei: Kann mir jemand ein tolles JavaScriptBuch empfehlen? Eins welches schön bei den Basics anfängt aber auch den ganzen Kram drumherum beleuchtet. So das ich genug Grundlagenwissen habe um im Netz beim weiterlesen nicht ständig zu stolpern?

Danke im Vorraus!
LG OP

EDIT:

Zum selber probieren auch hier: https://tinker.io/08681/1
 
Zuletzt bearbeitet:
1. Danke für das tinker, das ist immer praktisch
2. querySelectorAll gibt dir bereits eine Liste von Elementen, du brauchst kein getElementById
3. "900" ist kein gültiger Wert für "top". Da fehlt eine Einheit

https://tinker.io/08681/2


Ein Buch kann ich dir leider keines empfehlen. Allerdings kannst du mal hier vorbeischauen: https://developer.mozilla.org/en-US/learn/javascript Bei Mozilla findest du auch die beste Dokumentation zu den ganzen Funktionen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück