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.
Method 1
$(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);
});
});
Method 2
$(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>
