• Inloggen
  • Registreer
  • Zoeken
Dit topic
  • Overal
  • Dit topic
  • Dit forum
  • Artikelen
  • Pagina's
  • Forum
  • Downloads
  • Meer opties

ICTscripters

Dé plek voor IT

Dé plek voor IT

Aanmelden

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
    3. Onopgeloste topics
  3. ICT Nieuws
  4. Blog
  5. Marktplaats
    1. Werk
    2. Advertenties
    3. Domeinnamen
    4. Websites
    5. Design & lay-outs
    6. Scripts
    7. Overige
  6. Design
  7. Leden
    1. Actieve bezoekers
    2. Team
    3. Leden zoeken
  8. Downloads
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. Javascript + Ajax

Forum

  • nieuwe game

    tigermaffia 2 november 2026 om 15:21
  • Criminolz

    qevanto 31 oktober 2026 om 20:52
  • [Beta] Ottomaan: gratis browserspel met een echte, levende stad. Feedback gezocht!

    frio 27 oktober 2026 om 12:22
  • Port Father: beta van een browsergame in Antwerpen 1931, feedback welkom

    Jeroen.G 26 oktober 2026 om 10:33
  • Maffia Hotel: een browsergame waarin je van lobbygast naar spil van het hotel groeit

    eeyk 22 oktober 2026 om 18:43
  • Crime Club volledig herschreven vanaf nul

    frio 19 oktober 2026 om 23:57
  • Malavita (nieuwe maffia game, van 0)

    jos 19 oktober 2026 om 23:18
  • Herkent deze Notion-structuurscan echte problemen?

    Jeroen.G 19 oktober 2026 om 15:09

Marktplaats

  • [Aanbod] Stadskaart voor je browsergame: van menu naar klikbare stad, vanaf €200

    frio 29 oktober 2026 om 18:17
  • [Verkoop] G4G (Gangsters 4 Gangsters): volledige broncode, nieuw gebouwd in PHP 8.3 | € 30 per domein

    frio 27 oktober 2026 om 18:54
  • [TE KOOP] Malavita.be [Maffiaspel, gebaseerd op omicidio.nl, unieke code]

    Dpm_x 26 oktober 2026 om 00:22

Json laden in html tabel

  • Jeroen.G
  • 25 januari 2021 om 20:43
  • Jeroen.G
    Moderator
    Berichten
    475
    Filebase Entries
    48
    • 25 januari 2021 om 20:43
    • #1

    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); 
        }); 
    });
    Meer tonen


    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"
        }
     ]
    Meer tonen

    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>
    Meer tonen

    Al vast super bedankt :)

    Met vriendelijke groet,

    Jeroen

  • Gast, wil je besparen op je domeinnamen? (ad)
  • mica-
    Leerling
    Berichten
    111
    • 25 januari 2021 om 22:22
    • #2

    Slordig omgebouwd tot codepen en die lijkt wel een table te genereren: https://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!

    Mafiasource on Github

    Bewerkt 10 keer, laatst door mica- (25 januari 2021 om 23:17).

  • Jeroen.G
    Moderator
    Berichten
    475
    Filebase Entries
    48
    • 26 januari 2021 om 10:17
    • #3
    Citaat van MiCa-

    Slordig omgebouwd tot codepen en die lijkt wel een table te genereren: https://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:

    Code
    Uncaught TypeError: Cannot use 'in' operator to search for 'length' in http://pogonrode.nl/test.json
        at p (jquery.slim.min.js:2)
        at Function.each (jquery.slim.min.js:2)
        at HTMLDocument.<anonymous> (quests.php:27)
        at j (jquery.min.js:2)
        at Object.fireWith [as resolveWith] (jquery.min.js:2)
        at Function.ready (jquery.min.js:2)
        at HTMLDocument.J (jquery.min.js:2)

    Met vriendelijke groet,

    Jeroen

  • mica-
    Leerling
    Berichten
    111
    • 26 januari 2021 om 15:40
    • #4

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

    Code
    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:
    https://stackoverflow.com/questions/3026…h-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?

    Mafiasource on Github

  • darkshifty
    Leerling
    Berichten
    91
    • 27 januari 2021 om 10:36
    • #5

    Misschien helpt dit je op weg, ik heb het in vanilla Javascript herschreven. Scheelt je straks ook library conflicten met jQuery ;)
    https://codepen.io/darkshifty/pen/NWRQeob

  • Jeroen.G
    Moderator
    Berichten
    475
    Filebase Entries
    48
    • 27 januari 2021 om 11:49
    • #6
    Citaat van darkshifty

    Misschien helpt dit je op weg, ik heb het in vanilla Javascript herschreven. Scheelt je straks ook library conflicten met jQuery ;)
    https://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

  • AarClay
    Gevorderd
    Berichten
    424
    • 27 januari 2021 om 15:01
    • #7

    Het lege bestand IS de kracht van VanillaJS.

    Vanilla is 100% overheadloos... ;)

  • darkshifty
    Leerling
    Berichten
    91
    • 27 januari 2021 om 15:27
    • #8
    Citaat van Jeroen.G

    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.

    In deze situatie komt het omdat je http gebruikt i.p.v. https en cross site origin requests vind geen enkele browser cool, ik verwacht daarom ook dat je nog cors aanpassingen moet doen op je apache/nginx waar het json bestand gehost wordt.

  • Jeroen.G
    Moderator
    Berichten
    475
    Filebase Entries
    48
    • 28 januari 2021 om 22:34
    • #9
    Citaat van darkshifty

    In deze situatie komt het omdat je http gebruikt i.p.v. https en cross site origin requests vind geen enkele browser cool, ik verwacht daarom ook dat je nog cors aanpassingen moet doen op je apache/nginx waar het json bestand gehost wordt.

    ga ik eens naar kijken, een eigen server is nog allemaal beetje nieuw voor mij :p maar leer er veel van. Ik ga hier naar kijken! Ik laat weten of het gelukt is!

    Met vriendelijke groet,

    Jeroen

  • darkshifty
    Leerling
    Berichten
    91
    • 29 januari 2021 om 14:01
    • #10
    Citaat van Jeroen.G

    ga ik eens naar kijken, een eigen server is nog allemaal beetje nieuw voor mij :P maar leer er veel van. Ik ga hier naar kijken! Ik laat weten of het gelukt is!

    Als je ergens tegen aan loopt hoor ik het graag.

Registratie

Nog geen account? Registreer je nu en word deel van onze community!

Nu registreren Aanmelden

ICT Nieuws

  • PHP waarschuwt voor twee ernstige bugs die makkelijk uit te buiten lijken

    Aaron 22 oktober 2026 om 22:19

Blogs

  • Functioneel ontwerp

    Dees 28 december 2014 om 12:38
  • Access Control List implementatie in PHP/MySQL - deel 1/2

    FangorN 28 december 2018 om 12:35
  • Access Control List implementatie in PHP/MySQL - deel 2/2

    FangorN 29 december 2018 om 12:37

Gebruikers die dit topic bekijken

  • 1 Gasten
  1. Marktplaats
  2. Design
  3. Voorwaarden
  4. Ons team
  5. Leden
  6. Geschiedenis
  7. Regels
  8. Links
  9. Privacyverklaring
  10. Contact
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design