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

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]