Question

I’m trying to get a JSON input with AJAX and load it in a select control.
but when I run it :\ It stuck on “Downloading the recipes….”.
anyone see the problem maybe? (I tried couple of changes but nothing work so far)

1 more issue can anyone think on a shorter way to do the

ConvertToTable(targetNode)

cuse it’s way to long and complex, I think :\

    <script type="text/javascript">
             function loadXMLDoc() {
                 var xmlhttp;
                 document.getElementById("span").style.visibility = "visible";
                 document.getElementById("span1").style.visibility = "hidden";
                 document.getElementById("button").style.visibility = "hidden";
                 xmlhttp = new XMLHttpRequest();
                 xmlhttp.onreadystatechange = function () {
                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                         result = xmlhttp.responseText;
                         result = eval('(' + result + ')');
                         txt = "<select onchange='ShowRecipeDetails(this)'>";
                         for (i = 0; i < result.length; i++) {
                             txt = txt + "<option VALUE=" + result[i].recipe + ">" + result[i].recipe + "</option>";
                         }
                         txt = txt + "</select  >";
                         document.getElementById("span").style.visibility = "hidden";
                         document.getElementById("span1").style.visibility = "visible";
                         document.getElementById("myDiv").innerHTML = txt;
                     }
                 }
                 xmlhttp.open("POST", "http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=json", true);
                 xmlhttp.setRequestHeader("Content-Type", "application/json; charset=utf-8");
                 xmlhttp.send();
             }
             function ShowRecipeDetails(event) {
                 // get the index of the selected option 
                 var idx = event.selectedIndex;
                 // get the value of the selected option 
                 var field = event.options[idx].value;
                 $.ajax({
                     type: "GET",
                     url: "http://food.cs50.net/api/1.3/recipes?&output=json&id=" + field,
                     success: function (data) {
                         $("#TableDiv").html(ConvertToTable(data[0]));
                     }
                 });
             }
             function ConvertToTable(targetNode) {
                 var table = "<table border = 1 borderColor =green>";
                 table += "<tr>";
                 table += "<td>" + "ID" + "</td>";
                 table += "<td>" + targetNode.id + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Ingredients:" + "</td>";
                 table += "<td>" + targetNode.ingredients + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Name:" + "</td>";
                 table += "<td>" + targetNode.name + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Size:" + "</td>";
                 table += "<td>" + targetNode.size + "</td>";
                 table += "</tr>";
                 table += "<td>" + "Unit" + "</td>";
                 table += "<td>" + targetNode.unit + "</td>";
                 table += "</tr>";
                 table += "<td>" + "VEGETARIAN:" + "</td>";
                 table += "<td>" + targetNode.VEGETARIAN + "</td>";
                 table += "</tr>";
                 table += "</tr>";
                 table += "</table>"
                 return table;
             }
 </script>

and the HTML:

<button id="button"  type="button" onclick="loadXMLDoc()" >Get all recipes</button>
<br />
<span id="span" style="visibility:hidden">Downloading the recipes....</span>
<span id="span1" style="visibility:hidden">Please choose a recipe ID to view</span>
<div id="jsonDiv"></div>
<div id="myDiv"></div>
<div id="TableDiv"></div>

Answer 1

The HarvardFood API also supplies a JSONP version. So if you change your URL to this:

http://food.cs50.net/api/1.3/menus?meal=BREAKFAST&sdt=2011-03-21&output=jsonp&callback=parseResponse

you can create a parseResponse function to handle the data that comes back, and you can do the AJAX by inserting a script tag.

The problem is that you’re running afoul the Same Origin Policy.

---

I see that you’ve updated the question to use jQuery AJAX. That offers a jsonp data type, which might be easier than adding a script tag.