Json laden in html tabel

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • Json laden in html tabel

      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 Source Code: quest.js

      1. $(document).ready(function () {
      2. // FETCHING DATA FROM JSON FILE
      3. $.getJSON("test.json",
      4. function (data) {
      5. var pogo = '';
      6. // ITERATING THROUGH OBJECTS
      7. $.each(data, function (key, value) {
      8. //CONSTRUCTION OF ROWS HAVING
      9. // DATA FROM JSON OBJECT
      10. pogo += '<tr>';
      11. pogo += '<td>' +
      12. value.url + '</td>';
      13. pogo += '<td>' + value.name + '</td>';
      14. pogo += '<td>' + value.quest_task + '</td>';
      15. pogo += '<td>' + value.item_type + ' ';
      16. pogo += '' + value.pokemon_name +'';
      17. pogo += '' + value.item_amount + 'x</td>';
      18. pogo += '</tr>';
      19. });
      20. //INSERTING ROWS INTO TABLE
      21. $('#table').append(pogo);
      22. });
      23. });
      Display All



      Hierbij een test bestandje met de Json data zoals mn backend deze genereerd (ja meer data, maar die heeft mn backend weer nodig)

      JavaScript Source Code: test.json

      1. [
      2. {
      3. "item_amount": 3,
      4. "item_id": 701,
      5. "item_type": "Razz Berry",
      6. "latitude": 51.714576,
      7. "longitude": 5.557307,
      8. "name": "Hooge Vorssel",
      9. "pokemon_asset_bundle_id": "00",
      10. "pokemon_costume": "00",
      11. "pokemon_form": "00",
      12. "pokemon_id": "000",
      13. "pokemon_name": "",
      14. "pokestop_id": "12f58a87059a4b7b86a5ee6582047293.16",
      15. "quest_condition": "[]",
      16. "quest_reward_type": "Item",
      17. "quest_reward_type_raw": 2,
      18. "quest_target": 10,
      19. "quest_task": "Catch 10 Pokemon",
      20. "quest_template": "CHALLENGE_CATCH_EASY",
      21. "quest_type": "Catch 10 pokémon",
      22. "quest_type_raw": 4,
      23. "timestamp": 1611591164,
      24. "url": "http://lh3.googleusercontent.com/FDbpdTWuzbcRop7OaUCgdVb0TmPHTN35nwDsEqAN2ynrofTAtU7R3eigsc8nupbMsu1jkZDQ33Y1OPZTPEBxFZwCEQ"
      25. },
      26. {
      27. "item_amount": 10,
      28. "item_id": 0,
      29. "item_type": "Mega Energy",
      30. "latitude": 51.709247,
      31. "longitude": 5.56154,
      32. "name": "Buurtspeelveld, Kruisstraat - Weijen",
      33. "pokemon_asset_bundle_id": "00",
      34. "pokemon_costume": "00",
      35. "pokemon_form": "00",
      36. "pokemon_id": "003",
      37. "pokemon_name": "Venusaur",
      38. "pokestop_id": "31c1cf4038194bfd89d6a5b4020315e2.16",
      39. "quest_condition": "[]",
      40. "quest_reward_type": "Energy",
      41. "quest_reward_type_raw": 12,
      42. "quest_target": 5,
      43. "quest_task": "Power up Pokemon 5 times",
      44. "quest_template": "CHALLENGE_MEGA_ENERGY_POWER_UP",
      45. "quest_type": "Power up a Pokemon 5 times",
      46. "quest_type_raw": 14,
      47. "timestamp": 1611595866,
      48. "url": "http://lh3.googleusercontent.com/z2V3lU8j7cCp3n1HfimJR-caY-ElaaDjgDZI0cDGouq0vxqBcwjhmqFkaYYpabRz9TONp6EiJOf0OSvBk9BHVVZQSdU"
      49. },
      50. {
      51. "item_amount": 3,
      52. "item_id": 201,
      53. "item_type": "Revive",
      54. "latitude": 48.853093,
      55. "longitude": 2.342645,
      56. "name": "Trompe L Oeil",
      57. "pokemon_asset_bundle_id": "00",
      58. "pokemon_costume": "00",
      59. "pokemon_form": "00",
      60. "pokemon_id": "000",
      61. "pokemon_name": "",
      62. "pokestop_id": "df96ed7bf8864e4396e0aa1d87622737.16",
      63. "quest_condition": "[{\"type\": 42}]",
      64. "quest_reward_type": "Item",
      65. "quest_reward_type_raw": 2,
      66. "quest_target": 1,
      67. "quest_task": "Scan pokestop",
      68. "quest_template": "GEOTARGETED_AR_SCAN",
      69. "quest_type": "Scan pokestop",
      70. "quest_type_raw": 46,
      71. "timestamp": 1611547196,
      72. "url": "http://lh3.googleusercontent.com/as7z5bbet7Rp1-pHIosazZvEk7rzyARqGDv8PJEvg5mFxDVGbaWLWUpKZCKOFEezK8TlJqNeSlp-fKQbhfLoC6OAEw"
      73. }
      74. ]
      Display All
      En ik roep het als volgt aan in mn html:

      Head

      HTML Source Code: head

      1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      2. <script scr="quest.js"> </script>
      Body

      HTML Source Code

      1. <div class="container">
      2. <div class="row">
      3. <div class="col-lg-12 text-center">
      4. <h1 class="mt-5">Quests</h1>
      5. <p class="lead">De quest scan wordt dagelijks vernieuwd tussen 01.00 uur en 05.00 uur!</p>
      6. <table class="table" id="table">
      7. </table>
      8. </div>
      9. </div>
      10. </div>
      Display All
      Al vast super bedankt :)
      Met vriendelijke groet,

      Jeroen
    • Slordig omgebouwd tot codepen en die lijkt wel een table te genereren: codepen.io/MDevBE/pen/yLadwWa
      Ben je zeker dat deze lijn code wel werkt? $.getJSON("test.json", function (data) {
      Heb ik in die testpen wel vervangen met een var data = alle data in een array. (onveranderd zoals je file)

      Eens verder zitten knoeien in die pen, het vervangen [ { werkt niet!
      Zou toch eens je data dumpen in een log na het inlezen en kijken of daar iets misliep!

      The post was edited 10 times, last by MiCa- ().

    • MiCa- wrote:

      Slordig omgebouwd tot codepen en die lijkt wel een table te genereren: codepen.io/MDevBE/pen/yLadwWa
      Ben je zeker dat deze lijn code wel werkt? $.getJSON("test.json", function (data) {
      Heb ik in die testpen wel vervangen met een var data = alle data in een array. (onveranderd zoals je file)

      Eens verder zitten knoeien in die pen, het vervangen [ { werkt niet!
      Zou toch eens je data dumpen in een log na het inlezen en kijken of daar iets misliep!
      hmm oke dus het zit hem in het ophalen, ga ik even uitzoeken

      Edit: Zie hier mn log bij het laden van een file:

      Source Code

      1. Uncaught TypeError: Cannot use 'in' operator to search for 'length' in http://pogonrode.nl/test.json
      2. at p (jquery.slim.min.js:2)
      3. at Function.each (jquery.slim.min.js:2)
      4. at HTMLDocument.<anonymous> (quests.php:27)
      5. at j (jquery.min.js:2)
      6. at Object.fireWith [as resolveWith] (jquery.min.js:2)
      7. at Function.ready (jquery.min.js:2)
      8. at HTMLDocument.J (jquery.min.js:2)
      Met vriendelijke groet,

      Jeroen
    • Interessant! Lokaal krijg ik de error wat me niet vreemd lijkt uiteraard:

      Source Code

      1. Access to XMLHttpRequest at 'file:///C:/Users/./././test.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, https, chrome-untrusted.
      Even jouw error opgezocht en op het volgende gestoten:
      stackoverflow.com/questions/30…r-to-search-for-length-in
      JSON.parse() op die data al eens geprobeerd net na inlezen, net voor .each(), de each vervolgens op die JSON.parse()'ed data?
    • darkshifty wrote:

      Misschien helpt dit je op weg, ik heb het in vanilla Javascript herschreven. Scheelt je straks ook library conflicten met jQuery ;)
      codepen.io/darkshifty/pen/NWRQeob
      ga ik proberen, nou wil ik de vanilla.js downloaden maar welke functies ik ook selecteer het is en blijft een leeg bestand?

      Edit: Als ik op je code pen de link verander die de data op moet halen naar die van mij (klikje voor data) dan laad hij ook wederom niks...
      Deze data wordt op mn backend gegenereerd, en ook gebruikt op mn backend. Een deel van die data wil ik dus via json op mn frontend gooien. Dat frontend staat overigs elders.
      Met vriendelijke groet,

      Jeroen