alert JSON element by using jquery

Question

i am trying to alert a JSON element using JQuery , here is my code:

data.js JSON data

[
    {
  "name": "bader",
  "major": "medicine",
  "id": "334453"
    }
]

Jquery code

$(document).ready(function() {

      $.getJSON("data.js", function(json) {
   alert("JSON Data: " + json.name);
 });



});

i tried to inspect element i had this error on my consol

XMLHttpRequest cannot load file:///data.js. Origin null is not allowed by Access-Control-Allow-Origin.

i am still very new to handling JSON and JQUERY , i do not know where i went wrong here , if someone could help

Felix Kling · Accepted Answer · 2012-04-17 23:26:24Z

5

file:///data.js indicates that you are loading the page directly from your local file system.

Browsers have restrictions for Ajax request, they don't allow access to remote domains (if the remote domain does not allow it) or local files (though this can be enabled afaik (somehow, depends on the browser)).

The easiest way, IMHO, is to access your file through a server, not from the file system.
If you have Python, you can simply start a local server in the current directory with python -m SimpleHTTPServer. That's enough for testing and better than local file system access.

Regarding the output: json will be an array, so you have to access the name of the first object with json[0].name.

edited Apr 17, 2012 at 23:26

answered Apr 17, 2012 at 23:21

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jānis Gruzis · Accepted Answer · 2012-04-17 23:21:13Z

1

Access it like this

json[0].name

because [] brackets are array operators.

answered Apr 17, 2012 at 23:21

Jānis Gruzis

9951 gold badge11 silver badges26 bronze badges

Comments

Jason Foglia · Accepted Answer · 2014-02-17 20:16:55Z

1

Try this:

$.ajax({
  url: "data.js",
  dataType: 'json',
  contentType:"application/json",
  success: function(data)
  {
      alert(JSON.stringify(data, null, "\t"))
  }
});

edited Feb 17, 2014 at 20:16

answered Apr 17, 2012 at 23:21

Jason Foglia

2,6273 gold badges32 silver badges54 bronze badges

5 Comments

Jason Foglia Over a year ago

Also, your JSON is malformed it should start with curly braces {[{name:"",blah}]}

Felix Kling Over a year ago

jsonlint.com says it's valid. Why do you think it is invalid? edit: No, the top level "element" has either to be an array or object. {[{name:"",blah}]} on the other side is totally incorrect.

Jason Foglia Over a year ago

It might work just fine for javascript, but in other languages it won't work. Just trying to keep to best practices!

Bader H Al Rayyes Over a year ago

thanks , but the issue was that i am not working on webserver enivornment

Felix Kling Over a year ago

It should, because it is valid according to the specification.

Collectives™ on Stack Overflow

alert JSON element by using jquery

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related