为什么我无法在表格中看到我的JSON数据？

i write this question because i have this site i need to make, and my only problem is the JSON. i have this url with the JSON but when ever i try to work with the link it gives me an error, that you can see further down in my question, but when take all the data from the url i put it in a VAR then i will get no error and i will see me data, but that is not what is supposed to happen.

我写这个问题，因为我有这个网站，我需要做，我唯一的问题是JSON。我有这个带有JSON的网址，但是当我尝试使用链接时它会给我一个错误，你可以在我的问题中进一步了解，但是当从网址获取所有数据时我把它放在VAR然后我将得到没有错误，我会看到我的数据，但这不是应该发生的事情。

i got this problem with my JSON, some how i cant see my data on my HTML page, and i cant find the problem.

我用我的JSON遇到了这个问题，有些我怎么看不到我的HTML页面上的数据，我无法找到问题所在。

here you have my HTML page:

在这里你有我的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>

and here you have my 2 scripts i tried out the first one i try to get the JSON from an url the second one i downloaded the JSON locally down on my pc

在这里你有我的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>

how the data has been setup: all the JSON data is from this url: https://www.unisport.dk/api/sample/

如何设置数据：所有JSON数据来自此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"},

This is my error message in my console:XMLHttpRequest cannot load

这是我的控制台中的错误消息：XMLHttpRequest无法加载

Now my question is how does i fix the problem if there is one or what does i miss, in order to get it working, also i would really like to get the Data trough the URL as shown in the first script

现在我的问题是我如何解决问题，如果有一个或我错过了什么，以使其工作，我也真的想通过URL获取数据，如第一个脚本中所示

(also i only use jQuery, Bootstrap and HTML in this project.)

（我也只在这个项目中使用jQuery，Bootstrap和HTML。）

EDIT Problem fixed, since i'm doing this project locally on my PC i had to start up a local server, that i forgot all about. So if any one else have some problems as me BE SURE TO DOUBLE CHECK that you have a local server running for the project

编辑问题已修复，因为我在我的PC上本地做这个项目我必须启动一个本地服务器，我忘记了所有。因此，如果任何其他人有一些问题，因为我确实要检查您是否有为项目运行的本地服务器

2 个解决方案

#1

Check this plunker

检查这个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>

#2

Your script seems fine. By process of elimination, there must be a problem with the $.getJSON("unisport.json", function(data) { ... } ); call. You must either not be getting a JSON response from the server or the JSON in the expected format.

你的脚本似乎很好。通过消除过程，$ .getJSON（“unisport.json”，function（data）{...}）必定存在问题;呼叫。您必须要么不是从服务器获取JSON响应，要么以预期格式获取JSON。

Either attempt to console.log the received JSON response to affirm it is in the expected format or check your debugger to see if $.getJSON has thrown an error.

尝试console.log收到的JSON响应以确认它是预期的格式，或者检查调试器以查看$ .getJSON是否抛出了错误。

#1