title: How to read from json file in html page ?
body: <p>Guys </p>
  
  <p>I want to read from json file ,i create json file and use ajax to read from it.
  i create Video object which contain Courses objects (title &amp; URL)
  .
  i try to read title &amp; url of HTML as Example but no data show in the HTML page .</p>
  
  <pre><code>   {
    "video": {
      "HTML": [
        {
          "title": "HTML Intro",
          "URL": "http://www.youtube.com/embed/dD2EISBDjWM"
        },
        {
          "title": "Lists",
          "URL": "http://www.youtube.com/embed/09oErCBjVns"
        },
        {
          "title": "Tables",
          "URL": "http://www.youtube.com/embed/wvR40su_XBM"
        },
        {
          "title": "Links",
          "URL": "http://www.youtube.com/embed/U4UHoiK6Oo4"
        },
  
        {
          "title": "Images",
          "URL": "http://www.youtube.com/embed/Zy4KJeVN7Gk"
        }
      ],
      "CSS": [
        {
          "title": "Applying Styles",
          "URL": "http://www.youtube.com/embed/Wz2klMXDqF4"
        },
        {
          "title": "Selectors",
          "URL": "http://www.youtube.com/embed/6rKan6loNTw"
        },
        {
          "title": "Box Model",
          "URL": "http://www.youtube.com/embed/NR4arpSA2jI"
        },
        {
          "title": "Positioning",
          "URL": "http://www.youtube.com/embed/W5ycN9jBuBw"
        }
      ],
      "JavaScript": [
        {
          "title": "Introduction to JavaScript",
          "URL": "http://www.youtube.com/embed/yQaAGmHNn9s"
        },
        {
          "title": "Comments and Statements",
          "URL": "http://www.youtube.com/embed/yUyJ1gcaraM"
        },
        {
          "title": "Variables",
          "URL": "http://www.youtube.com/embed/og4Zku5VVl0"
        },
        {
          "title": "Functions",
          "URL": "http://www.youtube.com/embed/5nuqALOHN1M"
        },
        {
          "title": "Conditions",
          "URL": "http://www.youtube.com/embed/5gjr15aWp24"
        },
        {
          "title": "Objects",
          "URL": "http://www.youtube.com/embed/mgwiCUpuCxA"
        },
        {
          "title": "Arrays",
          "URL": "http://www.youtube.com/embed/nEvBcwlpkBQ"
        }
      ],
      "Jquery": [
        {
          "title": "Introduction",
          "URL": "http://www.youtube.com/embed/hMxGhHNOkCU"
        },
        {
          "title": "Event Binding",
          "URL": "http://www.youtube.com/embed/G-POtu9J-m4"
        },
        {
          "title": "DOM Accessing",
          "URL": "http://www.youtube.com/embed/LYKRkHSLE2E"
        },
        {
          "title": "Image Slider",
          "URL": "http://www.youtube.com/embed/KkzVFB3Ba_o"
        }
      ]
    }
  }
  </code></pre>
  
  <p>i use ajax to read from it , i need to read all HTML titles and URLs . what is the wrong with this ?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="id01"&gt;&lt;/div&gt;
  &lt;script&gt;
  var xhr;
    if (window.XMLHttpRequest)
    {
      xhr = new XMLHttpRequest();
    }
    else
    {
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xhr.open('GET', 'video.json');
    xhr.onreadystatechange = function ()
    {
      if ((xhr.readyState === 4) &amp;&amp; (xhr.status === 200)) {
          var arr = JSON.parse(xhr.responseText);
          var out = "&lt;table&gt;";
          for(i = 0; i &lt; arr.length; i++) {
          out += "&lt;tr&gt;&lt;td&gt;" +
          video[HTML][i].title +
          "&lt;/td&gt;&lt;td&gt;" +
         video[HTML][i].URL +
          "&lt;/td&gt;&lt;/tr&gt;";
        }
      out += "&lt;/table&gt;";
      document.getElementById("id01").innerHTML = out;
      }
    }
    xhr.send();
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>