You are definitely on the right track with your idea of creating a text file. In fact, that is all you need to do: put your JSON data in a text file and use the URL to that text file in your $.getJSON() call. For pure JSON, this file will need to be loaded from the same domain as your HTML page (and in fact you would normally use a relative URL in the $.getJSON() call.
So the first thing is to make valid JSON for your data, which it isn't yet:
[
{ "name": "paper", "price": "5" },
{ "name": "bear repellent", "price": "10" }
]
The whitespace isn't significant; you can format whitespace any way you like.
You can test that you have valid JSON by pasting it into jsonlint.com.
So if you put that data in a text file called 'testdata.json' in the same directory as your HTML page, then you can simply use 'testdata.json' as your URL in the $.getJSON() call.
Also, this bit of code doesn't quite make sense as written, or at least the names are misleading.
// Go through each received JSON element (assuming array input) and
// log its key value pair to the debug console (using Google Chrome
// as example)
$.each(data, function(key, value) {
console.log("Key is: " + key + " value is: " + value);
});
(I fixed a couple of simple typos in this copy of the code.)
That $.each() will iterate over the entire array, so your console.log() calls are going to print:
Key is: 0 value is: [object Object]
Key is: 1 value is: [object Object]
Now one thing you can do to get a more useful printout is to use individual arguments separated by commas instead of string concatenation in the console.log() call:
console.log( "Key is: ", key, " value is: ", value );
Because value is an object, console.log() is smart enough to log it as such—if you give it a chance to do so by passing it as a separate argument like this. When it's concatenated into a string with the + operator you lose that.
But more importantly, the code you want is probably something like this:
// Loop through the elements of the JSON array, and for each one
// log its `name` and `price` properties.
$.each( data, function( i, item ) {
console.log(
'Item number:', i,
'| name:', item.name,
'| price:', item.price
);
});
which should print:
Item number: 0 | name: paper | price: 5
Item number: 1 | name: bear repellent | price: 10
(The vertical bars aren't anything significant; they're just to format the output a little bit.)
I would also suggest not using an array as the top level of your JSON data, but make it an object instead and put your array inside it:
{
"items": [
{ "name": "paper", "price": "5" },
{ "name": "bear repellent", "price": "10" }
]
}
The only change you'll need to make in the code is to use $.each(data.items,...) instead of $.each(data,...).
The main reason to do this is that it is more future-proof: what if you later want to add information to your JSON response that doesn't pertain to a single item in your array but applies to the data/array as a whole? Using an object at the top level makes this simple:
{
"someglobalthing": "Hello world!",
"items": [
{ "name": "paper", "price": "5" },
{ "name": "bear repellent", "price": "10" }
]
}
and your code that refers to json.items doesn't have to change at all.
There's also a possible security issue with a top-level JSON array. I think it's fixed in modern browsers, but the top-level object is more versatile anyway.
