2017-05-30 3 views
2

Ich schreibe diese Frage, weil ich diese Seite habe, die ich machen muss, und mein einziges Problem ist das JSON. Ich habe diese URL mit dem JSON, aber wenn ich versuche, mit dem Link zu arbeiten, gibt es mir einen Fehler, den Sie weiter unten in meiner Frage sehen können, aber wenn ich alle Daten von der URL nehme, stelle ich es in einen VAR Ich werde keinen Fehler bekommen und ich werde Daten sehen, aber das ist nicht, was passieren soll.Warum kann ich meine JSON-Daten nicht in meiner Tabelle sehen?

Ich habe dieses Problem mit meinem JSON, einige, wie ich meine Daten auf meiner HTML-Seite nicht sehen kann, und ich kann das Problem nicht finden.

hier haben Sie meine HTML-Seite:

 <script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script> 
     <script src="js/jquery-3,2,1.js" type="text/javascript"></script> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 

    </head> 

    <body> 

     <div class="container-fluid"> 
      <table id="product_table" class="table table-responsive table-sm"> 
       <thead> 
        <tr> 
         <th>Product</th> 
         <th>Photo</th> 
         <th>Sizes</th> 
         <th>Price</th> 
         <th>Old Price</th> 
         <th>Delivery</th> 
        </tr> 
       </thead> 

       <tbody> 

       </tbody> 
      </table> 

     </div> 
      <script src="js/bootstrap.js"></script> 
      <script src="js/npm.js"></script> 
     </div> 
    </body> 

</html> 

und hier haben Sie meine 2 Skripte ich die erste ausprobiert ich versuche, die JSON von einer URL die zweite i lokal die JSON nach unten heruntergeladen auszukommen mein pc

<!-- <script> 
     var productJSON = "https://www.unisport.dk/api/sample/"; 
      $.getJSON(productJSON, function(data) { 
       $.each(data.products, function(i,f){ 
        var tblRow ="<tr>" + "<td>" + f.name + "</td>" + "<td>" + "<img class='img-responsive' alt='photo of product' src='" + f.image + "'>" + "</td>" + "<td>" + f.sizes + "</td>" + "<td>" + f.price + " " + f.currency + "</td>" + "<td>" + "<s>" + f.price_old + " " + f.currency + "</s>" + "</td>" + "<td>" + f.delivery + "</td>" + "</tr>" 
        $(tblRow).appendTo("#products tbody"); 
      }); 
     }); 

    </script> --> 

<script> 
    $(document).ready(function(){ 
     $.getJSON("unisport.json", function(data){ 
      var product_data = ''; 
      $.each(data, function(key, value){ 
       product_data += '<tr>'; 
       product_data += '<td>'+value.name+'</td>'; 
       product_data += '<td><img scr="'+value.image+'"></td>'; 
       product_data += '<td>'+value.sizes+'</td>'; 
       product_data += '<td>'+value.price+' '+value.currency+'</td>'; 
       product_data += '<td>'+value.price_old+' '+value.currency+'</td>'; 
       product_data += '</tr>'; 
      }); 
      $('#product_table').append(product_data); 
     }); 
    });  

</script> 

, wie die Daten-Setup hat: die alle JSON-Daten ist über folgende uRL: https://www.unisport.dk/api/sample/

{"is_customizable": "0", 
"delivery": "1-2 dage", 
"kids": "0", 
"name": "adidas Tr\u00e6ningsbukser Z.N.E. Road Trip - Gr\u00e5", 
"sizes": "XX-Large", 
"kid_adult": "0", 
"free_porto": "0", 
"image": "https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg", 
"package": "0", 
"price": "399,00", 
"url": "https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/", 
"online": "1", 
"price_old": "799,00", 
"currency": "DKK", 
"img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg", 
"id": "157128", 
"women": "0"}, 

Dies ist meine Fehlermeldung in meiner Konsole: XMLHttpRequest cannot load

Jetzt ist meine Frage wie funktioniert i das Problem zu beheben, wenn es einen gibt oder was ich nicht verpassen, um es zum Laufen zu bringen, auch würde ich wirklich wie zu erhalten die Daten der URL-Trog wie im ersten Skript

gezeigt (auch nur ich in diesem Projekt verwenden jQuery, Bootstrap und HTML.)

EDIT Problem behoben, da ich dieses Projekt mache lokal auf meinem pc musste ich einen lokalen server starten, den ich vergessen habe ich ungefähr. Also, wenn jemand anderes einige Probleme haben, wie mir SICHER SEIN doppeltzukontrollieren, dass Sie einen lokalen Server für das Projekt laufen haben

+2

Geben Sie bitte JS-Code verwendet. – EyuelDK

+0

'und hier hast du meine 2 Scripts, die ich ausprobiert habe '- schau nochmal, da ist nichts" hier "- bevor du irgendwas machst, hast du die Browser ** Developer ** tools Konsole auf Fehler überprüft? (F12, um es zu bringen) –

+0

@JaromandaX sry über das irgendwie es geschrieben, bevor ich fertig war, den Beitrag zu machen, aber ich habe vergessen alles über die Suche nach Fehlern in meiner Konsole, aber ich kann sehen, ich bekomme einen Fehler "XMLHttpRequest kann nicht geladen werden" – YoJuns

Antwort

0

prüfen diese plunker

var unisport = [{ 
 
"is_customizable": "0", 
 
"delivery": "1-2 dage", 
 
"kids": "0", 
 
"name": "adidas Tr\u00e6ningsbukser Z.N.E. Road Trip - Gr\u00e5", 
 
"sizes": "XX-Large", 
 
"kid_adult": "0", 
 
"free_porto": "0", 
 
"image": "https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg", 
 
"package": "0", 
 
"price": "399,00", 
 
"url": "https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/", 
 
"online": "1", 
 
"price_old": "799,00", 
 
"currency": "DKK", 
 
"img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg", 
 
"id": "157128", 
 
"women": "0" 
 
}, 
 
{ 
 
"is_customizable": "0", 
 
"delivery": "1-2 dage", 
 
"kids": "0", 
 
"name": "adidas Tr\u00e6ningsbukser Z.N.E. Road Trip - Gr\u00e5", 
 
"sizes": "XX-Large", 
 
"kid_adult": "0", 
 
"free_porto": "0", 
 
"image": "https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg", 
 
"package": "0", 
 
"price": "399,00", 
 
"url": "https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/", 
 
"online": "1", 
 
"price_old": "799,00", 
 
"currency": "DKK", 
 
"img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg", 
 
"id": "157128", 
 
"women": "0" 
 
}, 
 
{ 
 
"is_customizable": "0", 
 
"delivery": "1-2 dage", 
 
"kids": "0", 
 
"name": "adidas Tr\u00e6ningsbukser Z.N.E. Road Trip - Gr\u00e5", 
 
"sizes": "XX-Large", 
 
"kid_adult": "0", 
 
"free_porto": "0", 
 
"image": "https://d2ij1pxeion66i.cloudfront.net/product/157128/010c01d20cac.jpg", 
 
"package": "0", 
 
"price": "399,00", 
 
"url": "https://www.unisport.dk/fodboldudstyr/adidas-trningsbukser-zne-road-trip-gra/157128/", 
 
"online": "1", 
 
"price_old": "799,00", 
 
"currency": "DKK", 
 
"img_url": "https://s3-eu-west-1.amazonaws.com/product-img/157128_maxi_0.jpg", 
 
"id": "157128", 
 
"women": "0" 
 
}] 
 
    
 
    
 

 
var product_data = ''; 
 
$.each(unisport, function(key, value){ 
 
       product_data += '<tr>'; 
 
       product_data += '<td>'+value.name+'</td>'; 
 
       product_data += '<td><img style="height:50px;width:50px;" src="'+value.image+'"></td>'; 
 
       product_data += '<td>'+value.sizes+'</td>'; 
 
       product_data += '<td>'+value.price+' '+value.currency+'</td>'; 
 
       product_data += '<td>'+value.price_old+' '+value.currency+'</td>'; 
 
       product_data += '<td>'+value.delivery+'</td>'; 
 
       product_data += '</tr>'; 
 
      }); 
 
      $('#product_table').append(product_data);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container-fluid"> 
 
      <table id="product_table" class="table table-responsive table-sm"> 
 
       <thead> 
 
        <tr> 
 
         <th>Product</th> 
 
         <th>Photo</th> 
 
         <th>Sizes</th> 
 
         <th>Price</th> 
 
         <th>Old Price</th> 
 
         <th>Delivery</th> 
 
        </tr> 
 
       </thead> 
 

 
       <tbody> 
 

 
       </tbody> 
 
      </table> 
 

 
     </div>

+0

Hallo. Ich habe versucht, Plunker zu verwenden und es auf die gleiche Weise wie Sie versucht, versuchte sowohl mit dem VAR, um meine Daten zu speichern, und aus meiner JSON-Datei, ich habe auch versucht, die Daten über eine URL, aber wenn ich auf der Seite laden auf meinem PC wird es nicht die Daten laden (ich bekomme anXMLHttpRequest cant load error), aber wenn ich auf Plunker ich bekomme keinen Fehler und meine Daten werden in die Tabelle wie ich will putted, aber wie kann es auf Plunker aber nicht auf meinem arbeiten PC? – YoJuns

+0

Kann es helfen [hier] (https://stackoverflow.com/questions/3828982/xmlhttprequest-cannot-load-an-url-with-jquery) – RonyLoud

+0

Hey, danke für die Hilfe, ich fand heraus, dass ich vergessen habe Starten Sie einen lokalen Server. auch danke für die Seite, ich wusste nicht darüber. – YoJuns

0

Ihr Skript scheint in Ordnung. Nach dem Eliminierungsprozess muss ein Problem mit dem $.getJSON("unisport.json", function(data) { ... }); Anruf bestehen. Sie müssen entweder keine JSON-Antwort vom Server oder JSON im erwarteten Format erhalten.

Versuchen Sie entweder console.log die empfangene JSON-Antwort zu bestätigen, dass es im erwarteten Format ist, oder überprüfen Sie Ihren Debugger, um festzustellen, ob $.getJSON einen Fehler ausgelöst hat.

+0

Hallo ich bekomme keinen Fehler, wenn ich versuche, meine Website zu debuggen, und wenn ich in meiner Konsole suche, bekomme ich die XMLHttpRequest kann Fehler nicht laden, es mag es "finden" die Daten/JSON, aber ich habe keinen Zugriff darauf? – YoJuns

+0

Das Problem ist behoben, ich habe vergessen, meinen lokalen Server zu starten: D – YoJuns

Verwandte Themen