Question

I would like to have my data in a separate file (same path as all other files). I am struggling with importing the JSON file. This is what I tried which did not work:

$.getJSON("rezepte.json", function(obj) {
var rezepte = obj.rezepte;
});

update – this is what fianlly worked Thanks a lot for all your help.

var rezepte = $.getJSON("rezepte.json", function(obj) {
rezepte = obj.rezepte;
});

When using this data in the code direcly, all works well:

var rezepte = [
{ "name" : "Eierkopf" , "zutaten" : ["eier", "butter", "kekse"] , "menge" : ["3 Eier", "20g Butter", "5 Kekse"] , "portionen" : 1 , "zubereitung" : ["1. alles", "2. schön", "3. mischen."] },
{ "name" : "Käseschnitte" , "zutaten" : ["käse", "brot"] , "menge" : ["500g Käse", "2 Scheiben geschnittenes Brot"] , "portionen" : 2 , "zubereitung" : ["1. Brotunterseite mit Butter bestreichen (altes Brot verwenden)", "2. Brotoberseite mit Weisswein beträufeln", "3. mit Käse bedecken und würzen", "4. 20min. in vorgeheizten Ofen bei 180 Grad" , "5. nomal öpis"] },
{ "name" : "Gemüse-Auflauf" , "zutaten" : ["lauch"] , "menge" : ["1 Stengel Lauch", "5 Zitronen"], "portionen" : 4 , "zubereitung" : ["1. schneiden", "2. Kochen", "3. essen", "4. xxx", "5. yyy", "6. en guete"] } ];

Saved this as rezepte.json:

{
"rezepte" :

[
{ "name" : "Eierkopf" , "zutaten" : ["eier", "butter", "kekse"] , "menge" : ["3 Eier", "20g Butter", "5 Kekse"] , "portionen" : 1 , "zubereitung" : ["1. alles", "2. schön", "3. mischen."] },
{ "name" : "Käseschnitte" , "zutaten" : ["käse", "brot"] , "menge" : ["500g Käse", "2 Scheiben geschnittenes Brot"] , "portionen" : 2 , "zubereitung" : ["1. Brotunterseite mit Butter bestreichen (altes Brot verwenden)", "2. Brotoberseite mit Weisswein beträufeln", "3. mit Käse bedecken und würzen", "4. 20min. in vorgeheizten Ofen bei 180 Grad" , "5. nomal öpis"] },
{ "name" : "Gemüse-Auflauf" , "zutaten" : ["lauch"] , "menge" : ["1 Stengel Lauch", "5 Zitronen"], "portionen" : 4 , "zubereitung" : ["1. schneiden", "2. Kochen", "3. essen", "4. xxx", "5. yyy", "6. en guete"] }
]

}

unfortunately it still does not work – the $.getJSON results in an array of 3 empty objects only Would be happy to get further help. Thx, Andi

Answer 1

Sounds like you need to access the rezepte property of the returned object.

$.getJSON("rezepte.json", function(obj) {
    var rezepte = obj.rezepte;
});

It wouldn’t be wise to name that argument as json, as it’s not, it’s a JavaScript object (generally).