The question is published on by Tutorial Guruji team.
I’m just trying to generate a table using info from a JSON file but it is not working – I am new to HTML so I can’t see what I am doing wrong. The JSON file called food.json is just like:
[
{
"Type": "Snack",
"Flavour": "Salted",
"Brand": "Walkers"
},
{
"Type": "Dessert",
"Flavour": "Chocolate",
"Brand": "Alpro",
}
]
I have a javascript file called test.js with the following:
$(document).ready(function () {
$.getJSON("food.json",
function (data) {
var food = '';
$.each(data, function (key, value) {
food += '<tr>';
food += '<td>' +
value.Type + '</td>';
food += '<td>' +
value.Flavour + '</td>';
food += '<td>' +
value.Brand + '</td>';
food += += '</tr>';
});
$('#table').append(food);
});
});
And below is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.5.1.js"></script>
<script src="test.js"></script>
<title>Fave Food</title>
</head>
<body>
<h1>My Fave Food</h1>
<form>
<button onclick="getJSON()">Click for My Fave Food!</button>
</form>
<table id="table">
<thead>
<tr>
<th>Type</th>
<th>Flavour</th>
<th>Brand</th>
</tr>
</thead>
</table>
</body>
</html>
Answer
Well $.parseJSON is parsing json string, as I see you need to catch a file so you should use $.getJSON as it’s shortend function to the $.ajax request.
All other should be fine.
EDIT:
I have tested it, and it looks like your $.getJSON gives error instead of success, i guess your json should be formated, so when i used it like this it worked [{"Type":"Snack","Flavour":"Salted","Brand": "Walkers"},{"Type": "Dessert","Flavour":"Chocolate","Brand":"Alpro"}]
And also your button was in form, so it was refreshing every time the whole page, so i putted attribut type="button", so it doesnt trigger form submit.
Here’s full working solution:
food.json
[{"Type": "Snack","Flavour": "Salted","Brand": "Walkers"},{"Type": "Dessert","Flavour": "Chocolate","Brand": "Alpro"}]
test.js
function getJSON() {
$.getJSON("food.json", function (data) {
var food = '';
console.log( data );
$.each(data, function (key, value) {
food += '<tr>';
food += '<td>' +
value.Type + '</td>';
food += '<td>' +
value.Flavour + '</td>';
food += '<td>' +
value.Brand + '</td>';
food += '</tr>';
});
$('#table').append(food);
}).done(function() {
console.log( "second success" );
})
.fail(function(data) {
console.log( "error", data );
})
.always(function() {
console.log( "complete" );
});
}
html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="test.js"></script>
<title>Fave Food</title>
</head>
<body>
<h1>My Fave Food</h1>
<form>
<button type="button" onclick="getJSON();">Click for My Fave Food!</button>
</form>
<table id="table">
<thead>
<tr>
<th>Type</th>
<th>Flavour</th>
<th>Brand</th>
</tr>
</thead>
</table>
</body>
</html>