Beste medeleden
Een kort vraagje, ik probeer json data in te laden van mn backend en dit in een html tabel te printen.
Helaas werkt mn script je niet, hij laat niks zien helaas, zou iemand tips kunnen geven of een duwtje in de rug?
Het javascript:
JavaScript: quest.js
$(document).ready(function () {
// FETCHING DATA FROM JSON FILE
$.getJSON("test.json",
function (data) {
var pogo = '';
// ITERATING THROUGH OBJECTS
$.each(data, function (key, value) {
//CONSTRUCTION OF ROWS HAVING
// DATA FROM JSON OBJECT
pogo += '<tr>';
pogo += '<td>' +
value.url + '</td>';
pogo += '<td>' + value.name + '</td>';
pogo += '<td>' + value.quest_task + '</td>';
pogo += '<td>' + value.item_type + ' ';
pogo += '' + value.pokemon_name +'';
pogo += '' + value.item_amount + 'x</td>';
pogo += '</tr>';
});
//INSERTING ROWS INTO TABLE
$('#table').append(pogo);
});
});
Toon Meer
Hierbij een test bestandje met de Json data zoals mn backend deze genereerd (ja meer data, maar die heeft mn backend weer nodig)
JavaScript: test.json
[
{
"item_amount": 3,
"item_id": 701,
"item_type": "Razz Berry",
"latitude": 51.714576,
"longitude": 5.557307,
"name": "Hooge Vorssel",
"pokemon_asset_bundle_id": "00",
"pokemon_costume": "00",
"pokemon_form": "00",
"pokemon_id": "000",
"pokemon_name": "",
"pokestop_id": "12f58a87059a4b7b86a5ee6582047293.16",
"quest_condition": "[]",
"quest_reward_type": "Item",
"quest_reward_type_raw": 2,
"quest_target": 10,
"quest_task": "Catch 10 Pokemon",
"quest_template": "CHALLENGE_CATCH_EASY",
"quest_type": "Catch 10 pokémon",
"quest_type_raw": 4,
"timestamp": 1611591164,
"url": "http://lh3.googleusercontent.com/FDbpdTWuzbcRop7OaUCgdVb0TmPHTN35nwDsEqAN2ynrofTAtU7R3eigsc8nupbMsu1jkZDQ33Y1OPZTPEBxFZwCEQ"
},
{
"item_amount": 10,
"item_id": 0,
"item_type": "Mega Energy",
"latitude": 51.709247,
"longitude": 5.56154,
"name": "Buurtspeelveld, Kruisstraat - Weijen",
"pokemon_asset_bundle_id": "00",
"pokemon_costume": "00",
"pokemon_form": "00",
"pokemon_id": "003",
"pokemon_name": "Venusaur",
"pokestop_id": "31c1cf4038194bfd89d6a5b4020315e2.16",
"quest_condition": "[]",
"quest_reward_type": "Energy",
"quest_reward_type_raw": 12,
"quest_target": 5,
"quest_task": "Power up Pokemon 5 times",
"quest_template": "CHALLENGE_MEGA_ENERGY_POWER_UP",
"quest_type": "Power up a Pokemon 5 times",
"quest_type_raw": 14,
"timestamp": 1611595866,
"url": "http://lh3.googleusercontent.com/z2V3lU8j7cCp3n1HfimJR-caY-ElaaDjgDZI0cDGouq0vxqBcwjhmqFkaYYpabRz9TONp6EiJOf0OSvBk9BHVVZQSdU"
},
{
"item_amount": 3,
"item_id": 201,
"item_type": "Revive",
"latitude": 48.853093,
"longitude": 2.342645,
"name": "Trompe L Oeil",
"pokemon_asset_bundle_id": "00",
"pokemon_costume": "00",
"pokemon_form": "00",
"pokemon_id": "000",
"pokemon_name": "",
"pokestop_id": "df96ed7bf8864e4396e0aa1d87622737.16",
"quest_condition": "[{\"type\": 42}]",
"quest_reward_type": "Item",
"quest_reward_type_raw": 2,
"quest_target": 1,
"quest_task": "Scan pokestop",
"quest_template": "GEOTARGETED_AR_SCAN",
"quest_type": "Scan pokestop",
"quest_type_raw": 46,
"timestamp": 1611547196,
"url": "http://lh3.googleusercontent.com/as7z5bbet7Rp1-pHIosazZvEk7rzyARqGDv8PJEvg5mFxDVGbaWLWUpKZCKOFEezK8TlJqNeSlp-fKQbhfLoC6OAEw"
}
]
Toon Meer
En ik roep het als volgt aan in mn html:
Head
HTML: head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script scr="quest.js"> </script>
Body
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h1 class="mt-5">Quests</h1>
<p class="lead">De quest scan wordt dagelijks vernieuwd tussen 01.00 uur en 05.00 uur!</p>
<table class="table" id="table">
</table>
</div>
</div>
</div>
Toon Meer
Al vast super bedankt