JavaScript ajax call inside another ajax call

Question

I've got a call that brings up an url id for a recipe, that I'm trying feed into another call to return additional recipe data, but I think the scope is incorrect somewhere.

I'm getting

Cannot read property 'id' of undefined at XMLHttpRequest.http.onreadystatechange

in Chrome.

function searchFood() {
  var http = new XMLHttpRequest();
  var foodID = 'a1e1c125';
  var foodApiKey = 'c84a720e4f1750b59ce036329fccdc00';
  var foodMethod = 'GET';
  var url = 'http://api.yummly.com/v1/api/recipes?_app_id=' + foodID + '&_app_key=' + foodApiKey + '&q=scandinavian';
  http.open(foodMethod, url);
  http.onreadystatechange = function() {
    if (http.readyState == XMLHttpRequest.DONE && http.status === 200) {
      var foodData = JSON.parse(http.responseText);
      var foodName = foodData.matches[0].recipeName;
      console.log(foodData);
      for (var i = 0; foodData.matches.length; i++) {
        var recipeId = foodData.matches[i].id;
        console.log(recipeId);
      }

      function getRecipe() {
        var http = new XMLHttpRequest();
        var foodID = 'a1e1c125';
        var foodApiKey = 'c84a720e4f1750b59ce036329fccdc00';
        var foodMethod = 'GET';
        var url = 'http://api.yummly.com/v1/api/recipe/' + recipeId + '?_app_id=' + foodID + '&_app_key=' + foodApiKey;
        http.open(foodMethod, url);
        http.onreadystatechange = function() {
          if (http.readyState == XMLHttpRequest.DONE && http.status === 200) {
            var data = JSON.parse(http.responseText);
            console.log(data);
          } else if (http.readyState === XMLHttpRequest.DONE) {
            alert("something went wrong");
          }
        };
        http.send();
      };
    } else if (http.readyState === XMLHttpRequest.DONE) {
      alert('Something went wrong')
    }
  };
  http.send();
};

Any tips would be appreciated, thanks

Answer 1

Your truthy check is always true

for (var i = 0; foodData.matches.length; i++) 

you are missing i<