CODEWITHSUNDEEP
javascriptjqueryjson
dangerChihuahua007
dangerChihuahua007

Reputation: 20925

How do I use jQuery to read a file from JSON?

I am trying to read a JSON file with jQuery:

       var listOfItems;
       $(function() {
            $.getJSON('myData.json', function(data) {
                listOfItems = data.items;
            });
        });

This is myData.json:

{
    {"source": "Microsoft", "target": "Amazon", "type": "licensing"},
    {"source": "Microsoft", "target": "HTC", "type": "licensing"},
    {"source": "Samsung", "target": "Apple", "type": "suit"},
    {"source": "Motorola", "target": "Apple", "type": "suit"}
}

However, Chrome Web Developer notes that listOfItems is undefined after this code. Why? I am sure that both the javascript, HTML, and JSON files lie in the same directory.

Upvotes: 2

Views: 229

Answers (5)

Anders
Anders

Reputation: 6218

It's an asynchronous event. You can't perform a variable assignment like that with an asynchronous event, you must perform whatever operation you're doing within that specific function. Otherwise make sure it's a synchronous event (by setting the correct variable in JQuery), which will wait for the operation, in this case, the GET-request to complete before continuing the code (which is not recommended).

Upvotes: 1

Stephen P
Stephen P

Reputation: 14830

Your myData.json is not valid JSON.

It appears to contain an Object, which itself contains four Objects - but those inner objects haven't been given property names.

This would be valid

{
    "one"   : { "source":  "Microsoft", "target" : "Amazon", "type" : "licensing" },
    "two"   : { "source" : "Microsoft", "target" : "HTC",    "type" : "licensing" },
    "three" : { "source" : "Samsung",   "target" : "Apple",  "type" : "suit" },
    "four"  : { "source" : "Motorola",  "target" : "Apple",  "type" : "suit" }
}

But, given your listOfItems, I don't think that's what you want. You probably want an Array of Objects.

This is done by using square brackets instead of braces

[
    { "source":  "Microsoft", "target" : "Amazon", "type" : "licensing" },
    { "source" : "Microsoft", "target" : "HTC",    "type" : "licensing" },
    { "source" : "Samsung",   "target" : "Apple",  "type" : "suit" },
    { "source" : "Motorola",  "target" : "Apple",  "type" : "suit" }
]

Also, watch out for that trailing comma on the final item. It breaks in some browsers / javascript engines. I don't know offhand if JSON parsers allow it or not.

Upvotes: 1

Ram
Ram

Reputation: 144739

you can parse the json with jQuery.parseJSON();

http://api.jquery.com/jQuery.parseJSON/

Passing in a malformed JSON string may result in an exception being thrown. For example, the following are all malformed JSON strings:

{test: 1} (test does not have double quotes around it).
{'test': 1} ('test' is using single quotes instead of double quotes).

Additionally if you pass in nothing, an empty string, null, or undefined, 'null' will be returned from parseJSON. Where the browser provides a native implementation of JSON.parse, jQuery uses it to parse the string. For details on the JSON format, see http://json.org/.

Upvotes: 0

haltabush
haltabush

Reputation: 4538

Your main problem here is that you use an "{" instead of "[" for the containing array

You should have

[
    {source: "Microsoft", target: "Amazon", type: "licensing"},
    {source: "Microsoft", target: "HTC", type: "licensing"},
    {source: "Samsung", target: "Apple", type: "suit"},
    {source: "Motorola", target: "Apple", type: "suit"},
]

Upvotes: 1

Quentin
Quentin

Reputation: 944527

Fix the JSON. jsonlint will tell you what is wrong.

Property names in JSON are strings (unlike JavaScript where they may be identifiers) so they must be quoted.

Upvotes: 2

Related Questions