mbricep mbricep - 4 months ago 8
JSON Question

JSON call giving value that is not actually in the .json file

I am a little new when it comes to JSON and Javascript , so please excuse me if if this is a stupid question, but I have run into a problem that is starting to drive me insane.

On a webpage I am including two scripts; jQuery and a file called "scripts2.js". In the same directory as scripts2.js, I have a JSON file; "settings.json". From within my "scripts2.js" file I am running he following code inside of a function.



var settingsPath = settings.json;

jQuery.getJSON(settingsPath, function (data){
jQuery.each(data, function(index){
console.log("!"+data[index].name);
/*unrelated other stuff */


});
});




Previously the settings.json file looked like this



[
{"name":"Standard Black"},
{"name":"Gold"},
{"name":"Silver"}
]





So naturally when I looked in the Chrome Dev Console the log would print out

!Standard Black

!Gold

!Silver

However, when testing what would happen upon editing my settings.json file I changed "name":"Gold" to "name":"Test".



[
{"name":"Standard Black"},
{"name":"Test"},
{"name":"Silver"}
]




After the json updates I tried refreshing the page but my console log is still printing out

!Standard Black

!Gold

!Silver

...

I am at a loss. I have no idea why the data being retrieved with jQuery.getJSON() is sending the data of my old settings.json even after the changes has been saved. I have perused my .php file (which is generating the HTML) , as well as my included javascript and there is no other mention of another json file or any sort of clone of my json file in any related directory.
I really have no idea what is going on and I am starting to go insane. Does anyone have an idea of what the issue might be?

I dont know if it matters but I am running a XAMPP stack on my localhost. All files (index.php, scripts2.js, and settings.json) are in a directory located inside XAMPP's htdocs folder.

EDIT: Thank you all for the speedy and thorough answers, many of you answered the question I was a bout to ask next. I really appreciate it!

Answer

This is because the browser is caching the file from your first request. Simply clear the cache and run it again and the new data will be retrieved.

UPDATE:

To prevent the browser from caching this file, change your AJAX settings like so:

jQuery.ajaxSetup({ cache: false });

Before you make the getJSON call