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:



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

    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

    Al vast super bedankt :)

  • 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!

  • 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)
  • 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/ques…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?

  • 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.

  • 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.

  • 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!

Participate now!

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