title: Get data from json web service using only JavaScript and jQuery
body: <p>I have downloaded a sample application using this url <a href="http://www.zachhunter.com/2010/04/json-objects-to-html-table/" rel="nofollow noreferrer">http://www.zachhunter.com/2010/04/json-objects-to-html-table/</a>.
  The part which is working perfectly is :</p>
  
  <pre><code>&lt;script src="scripts/jquery-1.3.2.debug.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="scripts/json.htmTable.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="scripts/json.debug.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="styles/default.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          /* ASSOC ARRAY - Detail View */
          var json1 = { "d": [{ "__type": "acation", "id": "001", "date": "2010-06-01
                        00:00:00", "iod": "1", "mer": "ABC ", "tity": "6", "ot": 
                        "12,500", "nt": "75000", "ou": "A", "rep": "we", "perc": "34", 
                        "ine": "one", "year": "2009", "ct": "ABC ", "alet": "90000",  
                        "pro": "1500", "stats": "ive", "crnt": "5000", "ter": "AA"}] }
  
          /* NORMAL ARRAY - Detail View */
          var json2 = { "d": [{ __type: "acation", id: "001", date: "2010-06-01 
                        00:00:00", iod: "1", mer: "ABC ", tity: "6", ot: "12,500", nt: 
                        "75000", ou: "A", rep: "we", perc: "34", ine: "one", year: 
                        "2009", ct: "ABC ", alet: "90000", pro: "1500", stats: "ive", 
                        crnt: "5000", ter: "AA"}] }
  
          /* NORMAL ARRAY - Table View */
          var json3 = { "d": "[{\"Id\":1,\"UserName\":\"Sam Smith\"},{\"Id\":2,\"UserName
                        \":\"Fred Frankly\"},{\"Id\":1,\"UserName\":\"Zachary 
                        Zupers\"}]" }
  
          $('#DynamicGridLoading').hide();
  
          delete json1.d[0]["__type"];
          delete json2.d[0]["__type"];
  
          $('#DynamicGrid').append(CreateDetailView(json1.d, "lightPro", true)).fadeIn();
          $('#DynamicGrid').append(CreateDetailView(json2.d, "lightPro", true)).fadeIn();
          $('#DynamicGrid').append(CreateTableView(json3.d, "lightPro", true)).fadeIn();
  
      });
  &lt;/script&gt;
  
  &lt;/head&gt;
   &lt;body&gt;
     &lt;form id="form1" &gt;
     &lt;div id="DynamicGrid" &gt;
       &lt;div id="DynamicGridLoading" &gt;
          &lt;img src="images/loading.gif" /&gt;&lt;span&gt; Loading Data... &lt;/span&gt;
       &lt;/div&gt;
     &lt;/div&gt;
    &lt;br /&gt;
    &lt;a href="jsonservice_api.html"&gt;Json web service&lt;/a&gt;
    &lt;/form&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p>Its working fine, but when I try to use a free json webservice like this weather api: <a href="http://api.worldweatheronline.com/free/v1/weather.ashx?q=dehradun&amp;format=json&amp;num_of_days=5&amp;key=3tkb34yntmwqn23uambzdvgm" rel="nofollow noreferrer">http://api.worldweatheronline.com/free/v1/weather.ashx?q=dehradun&amp;format=json&amp;num_of_days=5&amp;key=3tkb34yntmwqn23uambzdvgm</a> in the following way I am getting nothing.</p>
  
  <pre><code>  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          $.ajax({
              type: "GET",
              url: "http://api.worldweatheronline.com/free/v1/weather.ashx?q=dehradun&amp;
                    format=json&amp;num_of_days=5&amp;key=3tkb34yntmwqn23uambzdvgm",
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              data: "{}",
              success: function (res) {
                  $('#DynamicGrid').append(CreateTableView1(res, "CoolTableTheme", 
                                      true)).fadeIn();
              }
          });
      });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The definition for CreateTableView is in one of the js file included in scripts tag having
  definition as follows :</p>
  
  <pre><code>function CreateTableView(objArray, theme, enableHeader) {
    // set optional theme parameter
    if (theme === undefined) {
        theme = 'mediumTable'; //default theme
    }
  
    if (enableHeader === undefined) {
        enableHeader = true; //default enable headers
    }
  
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
  
    var str = '&lt;table class="' + theme + '"&gt;';
  
    // table head
    if (enableHeader) {
        str += '&lt;thead&gt;&lt;tr&gt;';
        for (var index in array[0]) {
            str += '&lt;th scope="col"&gt;' + index + '&lt;/th&gt;';
        }
        str += '&lt;/tr&gt;&lt;/thead&gt;';
    }
  
    // table body
    str += '&lt;tbody&gt;';
    for (var i = 0; i &lt; array.length; i++) {
        str += (i % 2 == 0) ? '&lt;tr class="alt"&gt;' : '&lt;tr&gt;';
        for (var index in array[i]) {
            str += '&lt;td&gt;' + array[i][index] + '&lt;/td&gt;';
        }
        str += '&lt;/tr&gt;';
    }
    str += '&lt;/tbody&gt;'
    str += '&lt;/table&gt;';
    return str;
  }
  </code></pre>