The code below "has been" successfully returning the users.json file in an html table. I modified the json, but the code continues to return the original json. I delete the file, then add it back and then it can't find the file. I have cleared what I thought was the browser cache, to no avail.
Question #1: Where does the server "look" for the users.json file on my web server? Question #2: How can I assure I'm getting the latest changes, when the user clicks the button?
<script>
function CreateTableFromJSON() {
$.ajax({
type: "get",
url: ***"users.json",***
dataType: "json",
success: function (jsonData) {
var table = $('table');
table.empty();
var name = document.getElementById('name').value.toUpperCase();
$.each(jsonData, function (key, item) {
var table_row = $('<tr>');
$.each(item, function (itemKey, itemValue) {
if (key == 0) {
table.append($('<th>', { html: itemKey }));
}
if (item.LastName.startsWith(name)) {
table_row.append($('<td>', { html: itemValue }));
}
});
table.append(table_row);
}
);
},
error: function () {
alert("json not found");
}
});
}
</script>
<style>
th, td, p, input {
font: 14px Verdana;
}
table, th, td {
border: solid 1px #DDD;
border-collapse: collapse;
padding: 2px 3px;
text-align: left;
}
th {
font-weight: bold;
}
</style>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>
<input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
<input type='text' id='name' placeholder='Search Initial ' />
</div>
<p id="showData"></p>
<table id="tbl"></table>
</body>
</html>
</div>
Not sure what you mean by your first question. It will "look" at whatever location is in your url.
For your second question: you want to turn off browser caching. Add "cache: false", eg
type: "get",
url: ***"users.json",***
dataType: "json",
cache: false