Question

我正在尝试使用最新的可用作业在我的网站上获取一个列表，我有一个很好的JSON文件，很难将它放入无序列表中。我正在尝试这样：

$(document).ready(function(e) {

$.getJSON("my_url",

              function(data) {
                $('#li-1a').empty();
                $.each(data[0], function(i,item){
                  $("<a/>").html(data[0].ContractTitle).appendTo("#li-1a");
                });
              });

        });

但这不起作用，如果我这样做，它会多次重复ContractTitle，我认为这是因为$.each

我怎么能以另一种方式做到这一点？

这是JSON文件：

            [
                {
                    "ContractID": 14,
                    "ContractTitle": "Projectmanager",
                    "ContractStatus": "Closed",
                    "Executionlocation": "Utrecht",                    
                },
                {
                    "ContractID": 8,
                    "ContractTitle": "Projectmedewerker",
                    "ContractStatus": "Open",
                    "Executionlocation": "Aspen",                    
                },
                {
                    "ContractID": 7,
                    "ContractTitle": "Projectmanager",
                    "ContractStatus": "Closed",
                    "Executionlocation": "Delft",
                 },
            ]

无序列表html代码：

                         <ul class="list-1" id="ul-1">
                           <li id="li-1a"></li>
                           <li id="li-2a"></li>
                           <li id="li-3a"></li>
                         </ul>

Answer 1

您必须使用item代替data[0]：

   $.getJSON("my_url", function(data) {
       $('#li-1a').empty();
       $.each(data, function(i,item){
          $("<a/>").html(item.ContractTitle).appendTo("#li-1a");
       });
   });

使用jQuery.text可能更好，因为它阻止了xss：

$("<a/>").appendTo("#li-1a").text(item.ContractTitle);

Answer 2

看起来你想要：

   $.each(data[0], function(i,item){
          $("<a/>").html(item.ContractTitle).appendTo("#li-1a");
   });

项目而不是数据[0]

使用$ .getJSON在无序列表中加载JSON

2 个答案: