1

I have sample structure for some web template:

    <div class="navbar">
        <a id="home" href="#"></a>
        <a id="about" href="#"></a>
        <a id="team" href="#"></a>
        <a id="contact" href="#"></a>
    </div>

    <div>
        <p id="content"></p>         
    </div>

And local menu.json file:

[
    {"value":"Home" , "content":"This is default Home Page"},
    {"value":"About" , "content":"This is default About Page"},
    {"value":"Team" , "content":"This is default Team Page"},
    {"value":"Contact" , "content":"This is default Contact Page"}
]

I just want with Ajax Request dynamically load menu items and then content into a paragraph. But problem is that I can't access menu.json file. Please help me, this is my js file now: 

function loadJSON() {
    var request;
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }
    request.open('GET', 'menu.json');
    request.onreadystatechange = function() {
        if((request.readyState===4) && (request.status===200)) {
            var items = JSON.parse(request.responseText);
            console.log(items);
        }
    }
    request.send();
}
ilyablbnv
  • 161
  • 2
  • 10
  • Why not? What happens? – SLaks Mar 29 '16 at 21:03
  • Whether or not you can load local JSON files depends on your browser and security settings. – James Mar 29 '16 at 21:04
  • Possible duplicate of [Loading local JSON file](http://stackoverflow.com/questions/7346563/loading-local-json-file) – James Mar 29 '16 at 21:04
  • Error in console: XMLHttpRequest cannot load file:///Users/nickname/IdeaProjects/template-web/menu.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. – ilyablbnv Mar 29 '16 at 21:05
  • You answer is in the error: fully-qualify your json URL when debugging, as you're asking for `file` instead of `http`. – David T. Macknet Mar 29 '16 at 21:49

1 Answers1

0

This may work in mozzila FF, if you want to make this work try using a webserver it will work in all browsers, this is due to cross browser policy security

Milan
  • 829
  • 8
  • 12