How to import a JSON file?

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).

Answer 2

You encoded it wrongly because of non-ascii symbols, rezepte.json should look like:

[{"name":"Eierkopf","zutaten":["eier","butter","kekse"],"menge":["3 Eier","20g Butter","5 Kekse"],"zubereitung":["1. alles","2. sch\u00f6n","3. mischen."]},{"name":"K\u00e4seschnitte","zutaten":["k\u00e4se","brot"],"menge":["500g K\u00e4se","2 Scheiben Brot"],"zubereitung":["1. Brotunterseite mit Butter bestreichen (altes Brot verwenden)","2. Brotoberseite mit Weisswein betr\u00e4ufeln","3. mit K\u00e4se bedecken und w\u00fcrzen","4. 20min. in vorgeheizten Ofen bei 180 Grad"]},{"name":"Gem\u00fcse-Auflauf","zutaten":["lauch"],"menge":["1 Stengel Lauch","5 Zitronen"],"zubereitung":["1. schneiden","2. Kochen","3. essen","4. xxx","5. yyy","6. en guete"]}]

Formated:

[
  {
    "name": "Eierkopf",
    "zutaten": [
      "eier",
      "butter",
      "kekse"
    ],
    "menge": [
      "3 Eier",
      "20g Butter",
      "5 Kekse"
    ],
    "zubereitung": [
      "1. alles",
      "2. sch\u00f6n",
      "3. mischen."
    ]
  },
  {
    "name": "K\u00e4seschnitte",
    "zutaten": [
      "k\u00e4se",
      "brot"
    ],
    "menge": [
      "500g K\u00e4se",
      "2 Scheiben Brot"
    ],
    "zubereitung": [
      "1. Brotunterseite mit Butter bestreichen (altes Brot verwenden)",
      "2. Brotoberseite mit Weisswein betr\u00e4ufeln",
      "3. mit K\u00e4se bedecken und w\u00fcrzen",
      "4. 20min. in vorgeheizten Ofen bei 180 Grad"
    ]
  },
  {
    "name": "Gem\u00fcse-Auflauf",
    "zutaten": [
      "lauch"
    ],
    "menge": [
      "1 Stengel Lauch",
      "5 Zitronen"
    ],
    "zubereitung": [
      "1. schneiden",
      "2. Kochen",
      "3. essen",
      "4. xxx",
      "5. yyy",
      "6. en guete"
    ]
  }
]