Reputation: 20925
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
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
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
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
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