2017-05-30 80 views
2

我寫這個問題,因爲我有我需要做的這個網站,我唯一的問題是JSON。 我有這個網址與JSON,但是當我試圖與鏈接工作,它給了我一個錯誤,你可以看到我的問題進一步下來,但是當從網址中的所有數據我把它放在一個VAR然後我會得到任何錯誤,我會看到我的數據,但這不是應該發生的。爲什麼不能在我的表格中看到我的JSON數據?

我得到了這個問題與我的JSON,一些如何我不能看到我的數據在我的HTML頁面,我找不到問題。

在這裏你有我的HTML頁面:

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

,在這裏你有我的2個腳本我嘗試了第一個我試圖從一個網址,以獲取JSON第二個我下載了JSON本地下來我的電腦

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

如何將數據已被設置: 所有的JSON數據是從這個網址: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"}, 

這是我的控制檯我的錯誤信息:XMLHttpRequest cannot load

現在我的問題是,如何我解決這個問題,如果有一個或什麼我錯過了,爲了得到它的工作,還我真的想得到的數據線槽URL如在第一個腳本

(還我只使用jQuery,引導和HTML在這個項目。)

編輯 問題固定的,因爲我在做這個項目本地在我的電腦上,我不得不啓動本地服務器,我忘了al我約。 因此,如果任何其他人有一些問題,我一定要仔細檢查你有一個本地服務器的項目

+2

請包括JS代碼。 – EyuelDK

+0

'這裏你有我的2個腳本我試過了 - 再看一遍,這裏沒有什麼 - 在你做任何事之前,你有沒有檢查瀏覽器**開發人員**工具控制檯的錯誤? (F12來提起) –

+0

@JaromandaX sry關於它以某種方式發佈它之前,我已完成發佈,但我忘了所有關於在我的控制檯中查找錯誤,但我可以看到我得到一個「XMLHttpRequest無法加載」錯誤 – YoJuns

回答

0

檢查使用該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

你好。 我試圖使用plunker並以與你一樣的方式完成它,試圖用VAR來存儲我的數據,並從我的json文件,我也嘗試通過URL獲取數據,但是,當我加載op側在我的電腦上它不會加載數據(我得到一個XMLHttpRequest不能加載錯誤),但是當我做我蹲在地板上我得到沒有錯誤,我的數據被提出在表中,因爲我想,但它怎麼可以工作在蹲而不是在我的PC? – YoJuns

+0

可以幫助[這裏](https://stackoverflow.com/questions/3828982/xmlhttprequest-cannot-load-an-url-with-jquery) – RonyLoud

+0

嘿,謝謝你的幫助,我發現我忘了啓動本地服務器。 也感謝您的網站,我不知道這一點。 – YoJuns

0

你的腳本似乎罰款運行。通過淘汰過程,$.getJSON("unisport.json", function(data) { ... });呼叫必定會有問題。您必須不是從服務器或JSON以預期的格式獲得JSON響應。

要麼嘗試console.log收到的JSON響應,以確認它是在預期的格式或檢查您的調試器,看看是否$.getJSON已引發錯誤。

+0

你好,當我嘗試調試我的網站時,我得到沒有錯誤,當我看我的控制檯我得到的XMLHttpRequest無法加載錯誤,它喜歡它可以「找到」數據/ JSON,但我沒有訪問它? – YoJuns

+0

問題已修復,我忘了啓動我的本地服務器:D – YoJuns

相關問題