• Login
  • Register
  • Zoek
This Thread
  • Everywhere
  • This Thread
  • This Forum
  • Articles
  • Pages
  • Forum
  • Filebase Entry
  • More Options

ICTscripters

Dé plek voor IT

Dé plek voor IT

Login

Geavanceerde opties
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Home
  2. Forum
    1. Alle berichten
    2. Recente activiteiten
  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
  9. Goedkope domeinnamen
  1. Dé plek voor IT - ICTscripters
  2. Forum
  3. Scripting & programmeren
  4. Javascript + Ajax

Forum

  • Na 15 jaar terug van weggeweest: iCriminals.nl is terug (BETA)!

    Syntax 4 januari 2026 om 10:58
  • Developer Gezocht

    K.Rens 30 december 2025 om 12:32
  • Op zoek naar de legends

    Jeffrey.Hoekman 9 december 2025 om 09:41
  • [FREE] WeFact Hosting module

    Jeroen.G 13 oktober 2025 om 14:09
  • Help testers nodig voor android app Urgent

    urgentotservices 26 september 2025 om 10:21
  • Versio vervanger

    Jeroen.G 25 augustus 2025 om 15:56
  • Afspraken systeem met planbeperking

    Lijno 1 augustus 2025 om 23:04
  • Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

    NFT Art Designer 1 maart 2025 om 14:08

Marktplaats

  • 321 Nieuwe Domeinnamen December 2025

    shiga 1 januari 2026 om 10:26
  • Meerdere mafia game template te koop

    Syntax 28 december 2025 om 21:20
  • Van een pixelige afbeelding naar een strakke, moderne website

    Syntax 21 december 2025 om 17:05

Json laden in html tabel

  • Jeroen.G
  • 25 januari 2021 om 20:43
  • Jeroen.G
    Moderator
    Ontvangen Reacties
    14
    Berichten
    451
    Filebase Entries
    45
    • 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); 
        }); 
    });
    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 :)

    Met vriendelijke groet,

    Jeroen

  • Guest, wil je besparen op je domeinnamen? (ad)
  • mica-
    Student
    Ontvangen Reacties
    10
    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
    Ontvangen Reacties
    14
    Berichten
    451
    Filebase Entries
    45
    • 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-
    Student
    Ontvangen Reacties
    10
    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
    Student
    Ontvangen Reacties
    12
    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
    Ontvangen Reacties
    14
    Berichten
    451
    Filebase Entries
    45
    • 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
    Intermediate
    Ontvangen Reacties
    34
    Berichten
    423
    • 27 januari 2021 om 15:01
    • #7

    Het lege bestand IS de kracht van VanillaJS.

    Vanilla is 100% overheadloos... ;)

  • darkshifty
    Student
    Ontvangen Reacties
    12
    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
    Ontvangen Reacties
    14
    Berichten
    451
    Filebase Entries
    45
    • 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
    Student
    Ontvangen Reacties
    12
    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.

Participate now!

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

Maak een account aan Login

ICT Nieuws

  • Fijne feestdagen

    tcbhome 28 december 2025 om 13:55
  • Kritieke update voor Really Simple Security-plug-in

    K.Rens 16 november 2024 om 16:12
  • ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

    K.Rens 2 november 2024 om 16:09

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. Privacy Policy
ICTscripters ©2005 - 2026 , goedkope hosting door DiMoWeb.com, BE0558.915.582
Sponsors: Beste kattenhotel provincie Antwerpen | Beste Zetes eid kaartlezer webshop
Style: Nexus by cls-design
Stylename
Nexus
Manufacturer
cls-design
Licence
Commercial styles
Help
Supportforum
Visit cls-design