Print each array in object

Question

I have a HTML table, I want to fill it up with a JSON Object. Printing the object works, but I can't get the arrays seperately. When I try to get the value of one 'ingredient' it keeps saying undefined. What's wrong in my code?

JQ:

function loadIngredients() {
    $.get("js/test.json", (data) => {
        console.log(data);
        $.each(data, function (index) {
            console.log(this.ingredient);
        });
    });
}

JSON:

{
"data":[
    {"ingredient":"Banaan", "hoeveelheid":"50", "energie":"89", "vet":"0,9", "verzagigd vet":"0,3", "eiwit":"1,2", "koolhydraten":"20,4", "vezels":"1,9", "zout":"0,0"}, 
    {"ingredient":"Appel", "hoeveelheid":"80", "energie":"77", "vet":"0,6", "verzagigd vet":"0,1", "eiwit":"1,1", "koolhydraten":"15,6", "vezels":"2,5", "zout":"0,1"}, 
    {"ingredient":"Brood", "hoeveelheid":"120", "energie":"320", "vet":"1,1", "verzagigd vet":"0,4", "eiwit":"7,4", "koolhydraten":"30,6", "vezels":"4,8", "zout":"0,8"}
]
}

I think this is what you are looking for: https://stackoverflow.com/questions/1078118/how-do-i-iterate-over-a-json-structure — , Jun 06 '17 at 15:00

score 1 · Accepted Answer · answered Jun 06 '17 at 15:02

The "data" in your $.each loop is not is the variable that contains the {}. Try use data.data

 $.each(data.data, function(index) {
   console.log(this.ingredient);
 });

var data = {
  "data": [{
      "ingredient": "Banaan",
      "hoeveelheid": "50",
      "energie": "89",
      "vet": "0,9",
      "verzagigd vet": "0,3",
      "eiwit": "1,2",
      "koolhydraten": "20,4",
      "vezels": "1,9",
      "zout": "0,0"
    },
    {
      "ingredient": "Appel",
      "hoeveelheid": "80",
      "energie": "77",
      "vet": "0,6",
      "verzagigd vet": "0,1",
      "eiwit": "1,1",
      "koolhydraten": "15,6",
      "vezels": "2,5",
      "zout": "0,1"
    },
    {
      "ingredient": "Brood",
      "hoeveelheid": "120",
      "energie": "320",
      "vet": "1,1",
      "verzagigd vet": "0,4",
      "eiwit": "7,4",
      "koolhydraten": "30,6",
      "vezels": "4,8",
      "zout": "0,8"
    }
  ]
}

function loadIngredients() {
  $.each(data.data, function(index) {
    console.log(this.ingredient);
  });
}

loadIngredients();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Thank you! This works. What if I change my JSON "data": [{ in the top of the script to ingredienten? data.ingredienten nor ingredienten.data seems to work now. — Some Name, Jun 06 '17 at 15:37

Print each array in object

1 Answers1