Cannot load data from local JSON file

Question

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <script src= "C:\Documents and Settings\vivek.aggarwal\My Documents\Downloads\jquery-1.11.1.js"></script>
  <script src="mydata.json"></script>
</head>
<body>
    <p id="demo"> ABC </p>
    <script>

    $.getJSON(mydata.json, function(data) {
        var output = data.login[0].one;
        document.getElementById("demo").innerHTML= output;
    });

    </script>
</body>

and this is my JSON file (mydata.json)

{
    "login": [
        {
            "one": "vivek"
        }
    ]
}

I'd start by quoting the URI, ie `$.getJSON('mydata.json', ...`. Of course, your console would have alerted you to this error, if you'd bothered to check it — Phil, Jul 25 '14 at 05:46
Get rid of the duplicate jQuery script tags (`c:\documents....`) and change `$.getJSON('mydata.json'...)` Note the quotes. Please learn to use developer toolbar (press F12 in Chrome) — jasonscript, Jul 25 '14 at 05:46
and while you're using jQuery anyway... `$('#demo').html(data.login[0].one)` — Phil, Jul 25 '14 at 05:49

Gaurav Gandhi · Answer 1 · 2014-07-25T05:52:48.030

1

Try this method, it works for me.

$.ajax({
    url: 'mydata.json',
    dataType: 'json',
    success: function(result) {
       //Your code here, result is json obj
       $('#demo').html(result.login[0].one);
    },
    error: function() {
      // alert("error");
    }
});

edited Jul 25 '14 at 05:52

answered Jul 25 '14 at 05:47

Gaurav Gandhi

3,041
2
27
40

Thnx Phil, i replaced with jQuery for assignment. – Gaurav Gandhi Jul 25 '14 at 05:53
What's the reason for steering away from `$.getJSON`? – Phil Jul 25 '14 at 05:54
Refer http://stackoverflow.com/questions/1076013/difference-between-getjson-and-ajax-in-jquery – Gaurav Gandhi Jul 25 '14 at 05:55
For short answer to steering away, .getjson() calls .ajax(). – Gaurav Gandhi Jul 25 '14 at 05:56
Yes, I know they're equivalent. That's why I asked – Phil Jul 25 '14 at 05:57
They are equi, thats true but .getjson() calls .ajax(), so better to use .ajax(). And one more reason that you can modify with ease. – Gaurav Gandhi Jul 25 '14 at 05:59
No its not running....showing errors (1)Uncaught SyntaxError: Unexpected token : mydata.json:2 (2)XMLHttpRequest cannot load file:///D:/vivek/vivlogin/prac/mydata.json. Received an invalid response. Origin 'null' is therefore not allowed access. loginprac.html:1 Please help me – user3875623 Jul 25 '14 at 07:54
Update your current code in question. – Gaurav Gandhi Jul 25 '14 at 08:26

score 0 · Answer 2 · answered Jul 25 '14 at 05:47

0

Try this it should work.

$.getJSON("mydata.json", function(data) { 
        var output = data.login[0].one;
        document.getElementById("demo").innerHTML= output;
});

answered Jul 25 '14 at 05:47

Saddamhussain

860
5
14

Cannot load data from local JSON file

2 Answers2