✔ JSON Array ausgabe immer nur Objekt

grillfleisch

grillfleisch

Erfahrenes Mitglied
Hallo,

ich habe ein JQuery-script was mir ein JSON-Array zurück liefern soll, was es auch tut.
Leider weiß ich nicht ob alles richtig ist und ich es nur nicht kapiere oder ob das Script fehlerhaft ist.

Wenn es sich jemand anschauen möchte!

HTML: 
<!DOCTYPE html> 
<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#buttonAjax").click(function(){
        var name = encodeURIComponent($("#name").val());

            $.getJSON('data.json', 
                  function(data){
                      var items = [];

                      $.each(data, function(key, val) {
                        items.push('<li id="' + key + '">' + val + '</li>');
                      });
                    
                      $('<ul/>', {
                        'class': 'my-new-list',
                        html: items.join('')
                      }).appendTo('#output');
                     
                });
    });
});
</script>
</head>
<body>
    <input type="button" id="buttonAjax" value="gib array" />
    <div id="output" style="height: 1000px; width: 1000px; color: #000;"></div>
    
</body>
</html>

die ajax.php sieht so aus ->
PHP: 
function generate($width, $height)
{
    $fields = array();
    

    for($y=0; $y < $height; $y++)
    {

        for($x=0; $x < $width; $x++)
        {
           
            $type = array(
                    0=>array("id"=>'y'.$y.'-x'.$x.'',"type"=>'0'),
                    1=>array("id"=>'y'.$y.'-x'.$x.'',"type"=>'1'),  //wasser
                    2=>array("id"=>'y'.$y.'-x'.$x.'',"type"=>'2'),  //berge
                    3=>array("id"=>'y'.$y.'-x'.$x.'',"type"=>'3')   //wald
            );
                
            if($rand==0)
            {
                $fields[$y][$x] = $type[rand(1, 3)];
            }
            else
            {
                $fields[$y][$x] = $type[0];
            }
                           
        };

    };
    return $fields;
};

    $send = generate(15, 15);
    echo json_encode($send);
    //var_dump($send);
 
?>

wenn ich auf den Button klicke erscheint nur ->

Code: 
    [object Object],[object Object],[object Object],[object Object],[object Object]
    [object Object],[object Object],[object Object],[object Object],[object Object]
    [object Object],[object Object],[object Object],[object Object],[object Object]
    [object Object],[object Object],[object Object],[object Object],[object Object]
    [object Object],[object Object],[object Object],[object Object],[object Object]
wenn ich im Firebug von Mozilla in die Konsole schaue ->

Code: 
[[{"id":"y0-x0","type":"2"},{"id":"y1-x0","type":"2"},{"id":"y2-x0","type":"2"},{"id":"y3-x0","type":"2"},{"id":"y4-x0","type":"3"}],[{"id":"y0-x1","type":"2"},{"id":"y1-x1","type":"2"},{"id":"y2-x1","type":"3"},{"id":"y3-x1","type":"2"},{"id":"y4-x1","type":"3"}],[{"id":"y0-x2","type":"1"},{"id":"y1-x2","type":"2"},{"id":"y2-x2","type":"2"},{"id":"y3-x2","type":"3"},{"id":"y4-x2","type":"2"}],[{"id":"y0-x3","type":"1"},{"id":"y1-x3","type":"3"},{"id":"y2-x3","type":"3"},{"id":"y3-x3","type":"1"},{"id":"y4-x3","type":"1"}],[{"id":"y0-x4","type":"2"},{"id":"y1-x4","type":"2"},{"id":"y2-x4","type":"2"},{"id":"y3-x4","type":"1"},{"id":"y4-x4","type":"3"}]]

sieht eigentlich nach einem JSON-Array aus. Oder?

Wie bekomme ich es hin, dass er mir die Objekt als Werte ausgibt.
 
Welche Ausgabe erwartest du denn anstelle von "[object Object]"?

In dieser Zeile:

Javascript: 
items.push('<li id="' + key + '">' + val + '</li>');

ist "val" jeweils eines der Arrays auf zweiter Ebene. Dessen "toString" Methode gibt wie bei jedem Objekt standardmäßig "[object Object]" aus. Du musst schon genau sagen, welches Element du ausgeben willst. Zum Beispiel:

Javascript: 
items.push('<li id="' + key + '">' + val[0].id + '</li>');

Oder wenn du wirklich das JSON als String wollen würdest, dann

Javascript: 
items.push('<li id="' + key + '">' + JSON.stringify(val) + '</li>');
 
Super! Danke.

Sowas habe ich mir schon gedacht aber so richtig bin ich alleine nicht drauf gekommen :D.

HTML: 
$.getJSON('ajax.php',function(data){

                var items = [];
                $.each(data, function(key, val) {
                    for(i=0;i<=8;i++)
                    {
                      items.push('<img class="imgt" id="' + val[i].id + '" src="http://www.tutorials.de/images/map/' + val[i].type + '.png"></img>');
                    }
                    
                });
                    
                $('<div/>', {
                    'id': 'mymap',
                    html: items.join('')
                }).appendTo('#output');
                     
            });

Kann mir vielleicht noch jemand erklären warum zwischen den einzelnen Reihen ein Abstand vorhanden ist. Ich hoffe ich muss nicht noch ein Thread in der CSS-Ecke eröffnen ;)

und

wie man auf die länge des Array zukreifen kann.
zB
HTML: 
for(i=0;i<=data.lenght;i++)

data funktioniert aber nicht :)
@Maniac

So stand es auf der Jquery Website. Ich habe das Beispiel genommen damit ich sichergehen kann, das der Code im ganzen auch funktioniert.
 
Zuletzt bearbeitet:
mmh. also ich habe es nun so gelösst.

HTML: 
for(i=0; i <= data.length-1; i++)

alert(data.lenght) liefert = 9;

wenn ich nur data.lenght nehme meldet mir das Script jedoch eine Fehlermeldung ->"val[i] is undefined ".

Ich habe mitbekommen, dass diese Fehlermeldung nur kommt, wenn ich mehr Daten mit der for Schleife ausgeben möchte als vorhanden sind.

also ich denke mal das es so richtig sein muss, mit dem -1, da ich ja nur von 0-8 auslesen kann.
 
Zuletzt bearbeitet:
Das geht auch:
Code: 
for(i=0; i < data.length; i++)
Die Indizes bei Arrays fangen bei Null an. Das erste Element hat also den Index 0, das zweite den Index 1 usw. Dementsprechend muss der letzte Index n-1 sein, wobei n die Anzahl der Elemente des Arrays darstellt.
 
Ja stimmt! An das Gleichheitszeichen habe ich gar nicht gedacht xD. Danke.

Weiß trotzdem jemand wieso zwischen den IMG immer Abstände sind.

Also border und co sind 0. Leerzeichen sind auch keine vorhanden...
 
Vielen dank CPoly, habe es hinbekommen, ich hoffe das es so auch gemacht wird :)

Javascript: 
$.getJSON('ajax.php',function(data){
            var items = [];
            $.each(data, function(key, val) {
                for(var y = 0; y < data.length; y++)
                {
                	var value = data[y];
                	
                	for(var x = 0; x < value.length; x++)
                	{
                		items.push('<IMG style="border:none;" class="imgt" id="' + value[x].id + '" src="images/map/' + value[x].type + '.png" alt="' + value[x].id + '"></IMG>');
                	}
                  
                  items.push('<div class="clear"></div>');
                }
             });
            $(items.join('')).appendTo("#mymap");
        });

CSS: 
#mymap {
    cursor:move;
    position: absolute; 
    top: 40px; 
    left:120px; 
    width:531px; 
    height:531px; 
    overflow:hidden;
    border: 1px solid #000;
}

.imgt {
    border:none; 
    position:relative;
    background: green;
    width: 59px; 
    height: 59px;
}
img {
    display:block;
    border:none;
    padding:0px;
    margin:0px;
    float:left;
}
.clear{
    clear: both;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück