i am making a project using xampp, and i MUST use AJAX to show the data from a JSON file that i create. My problem is that i don't understand how to use AJAX to show JSON data using JQUERY/JS. I tried this 2 script watching tutorials on youtube/google, but no one working. Can someone tell me how can i fix the code or how can i use AJAX to show my local JSON file? I have made 2 attempts using 2 different methods I have no console errors but the website show nothing.
$(document).ready(function(){
$.getJSON("../json/output.json", function(data){
var project_data = '';
$.each(data, function(key, value){
project_data += '<tr>';
project_data += '<td>' + value.autore + '</td>';
project_data += '<td>' + value.title + '</td>';
project_data += '<td>' + value.category + '</td>';
project_data += '<td>' + value.descr + '</td>';
project_data += '<td>' + value.data + '</td>';
project_data += '<td>' + value.budget + '</td>';
project_data += '<td>' + value.flag + '</td>';
project_data += '</tr>'
});
$('#progetti').append(project_data);
});
});
$(document).ready(function(){
var ourRequest = new XMLHttpRequest();
ourRequest.open('GET', '../json/output.json');
var containerPrj = document.getElementById("container");
ourRequest.onload = function() {
var ourData = JSON.parse(ourRequest.responseText);
showData(ourData);
};
});
function showData(data){
var htmlString = "";
for(i = 0; i < data.length; i++){
htmlString += '<p>' + data[i].id + data[i].autore + data[i].title + '</p>';
}
containerPrj.insertAdjacentHTML('beforeend', htmlString);
}
here is my html if you need
<!DOCTYPE HTML>
<html>
<head>
<?php
include ("top.php");
include ("common.php");
ensure_logged_in();
?>
<link href="style/project.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/script4.js"></script>
</head>
<body>
<?php include ("nav.php");?>
<?php get_projects();?>
<table id = "progetti">
<tr>
<th>autore</th>
<th>titolo</th>
<th>categoria</th>
<th>descrizione</th>
<th>data</th>
<th>budget</th>
<th>disponibile</th>
</tr>
</table>
<div id = "container"></div>
</body>
</html>
Is your JSON file actually accessible via the path you specified? Seems like the file does not get found at all. Make sure the file can be accessed via the path specified.