Array of objects suddenly empty

Question

I am getting a json string from my Server via a php file, containing 25 meals. The php is started by a javascript function. I then want the json to be converted into an array of objects.

Responce stream has the right values. alert() shows the right values on every single step. Once the full stream is done the array is suddenly empty again. THIS is my issue and i am lost on this one, not even sure what to google.

I'll just paste the code from my php and javascript. Please note the 3 Alert() at the end of the javascript code, they show what happens.

Here is the php

<?php
$mysqlHOST = "localhost";
$mysqlUSER = "xxx";
$mysqlPW = "xxx";
$mysqlDB = "xxx";
$mysqlERROR = "Could not connect to database!";
$mysqlERRORDB = "Could not connect to database - DB-Error!";

@mysql_connect($mysqlHOST,$mysqlUSER,$mysqlPW) or die($mysqlERROR);
@mysql_select_db($mysqlDB) or die($mysqlERRORDB);

@mysql_query('SET CHARACTER SET utf8');
$res = mysql_query("SELECT * FROM Rezepte");

while($Row = mysql_fetch_array($res)) 
{      
    $jsondata[]= array('f1'=>$Row["id"], 'f2'=>$Row["data"], 'f3'=>$Row["art"],'f4'=>$Row["name"],'f5'=>$Row["zutaten"],'f6'=>$Row["info"],'f7'=>$Row["bild"]);
}; 

echo(json_encode($jsondata));
?>

Here is the Javascript.

//Variablen
varRezepte = []; //Liste mit den Rezeptobjecten

//Konstruktor für die Rezept - Objekte
function objRezept(varid, data, art, name, zutaten, info, bild)
{
    this.varid = varid;
    this.data = data;
    this.art = art;
    this.name = name;
    this.zutaten = zutaten;
    this.info = info;
    this.bild = bild;
}

//wenn Page gepaden ist soll das folgende passieren
$(function()
{   
    //Datenbank bemühen um die Rezepte herzubekommen    
    $.ajax({
                type: "POST",
                url: "planerDB.php",
                dataType: "json",
                success: function (data) 
                {
                    for(var i = 0;i < data.length;i++)
                    {
                      var item = data[i];
                      varRezepte.push(new objRezept(item.f1, item.f2, item.f3, item.f4, item.f5, item.f6, item.f7));
                      alert(varRezepte[i].name); //correct output
                    }   
                }
            }); 

    alert(varRezepte[0].name); //undefined
    alert(varRezepte.length); //zero
});

score 2 · Accepted Answer · answered Aug 01 '13 at 23:41

2

It is empty at the time the line executes and remember that.. Ajax is Asynchronous

The statement executes even before the request is completed. So it will always be undefined at the point you mentioned.

answered Aug 01 '13 at 23:41

Sushanth --

55,259
9
66
105

Nice and short answer, yet very usefull and explains my obvious error. I knew Ajax is async, yet it did not think about that in my current project. Been looking at 1000 other things all over the place. Thanks alot! – Marco Heumann Aug 02 '13 at 00:03
@Rattenmann.. Glad to have helped :) – Sushanth -- Aug 02 '13 at 00:20

score 0 · Answer 2 · answered Aug 01 '13 at 23:43

0

Your last 2 alert are outside of the callback, and are executed before the ajax is complete and has no data.

answered Aug 01 '13 at 23:43

Samer

973
1
6
15

Array of objects suddenly empty

2 Answers2