如何使用javascript從數組填充無序列表？

Question

我目前正在使用Phonegap創建應用。 我想遍歷一種數組形式來創建一種無序列表，這種格式其中url和title是存儲的值：

<li><a href="[url]">[title]</a></li>

我對這種開發應用程序的方式有些陌生，但我不確定如何將數據存儲在應用程序的根目錄中的最佳方法。 我想我可以制作一個JS數組，但是我想將其保存在單獨的文件中。 因此，我做了一個json文件：

{
  "title": "thisistheurl.com",
  "title": "thisistheurl.com"
}

如何根據本地json文件中的數據創建此列表？ 我沒有運氣就嘗試了這個：

$.getJSON( "links.json", function( data ) {
                  var items = [];
                  $.each( data, function( key, val ) {
                    $("linkList").append( "<li id='" + key + "'>" + val + "</li>" );
                  });
});

Answer 1

您需要更改的兩件事：

   $.each( data, function( key, val ) {
                    $("linkList").append( "<li id='" + key + "'>" + val + "</li>" );
                  });

最初，沒有名為linkList元素，可能是您想將ul的元素附加到類.linkList或ID #linkList 。

另一個，Inside $.each鍵代表title ，值代表the url 。 但是您分配錯誤。

      $("linkList").append( "<li id='" + key + "'>" + val + "</li>" );

它應該是

      $("selector").append( "<li id='" + val+ "'>" + key+ "</li>" );

而且我沒有看到任何a位置標記。 您可能需要添加a標簽為好。

還要注意，對象中不能有重復的鍵title 。 在這種情況下，您可能需要處理一組對象。

[{
  "title": "title you desire",
  "link" : "thisistheurl.com"
},{
  "title": "title you desire",
  "link" : "thisistheurl.com"
},{
  "title": "title you desire",
  "link" : "thisistheurl.com"
}]

演示：

 var data = [{ "title": "title you desire", "link" : "thisistheurl.com" },{ "title": "title you desire", "link" : "thisistheurl.com" },{ "title": "title you desire", "link" : "thisistheurl.com" }]; $.each( data, function( key, val ) { var $li = $("<li><a href='"+val.link+"'>"+val.title+"</a></li>"); $("#linkList").append($li); }); 

 ul#linkList { border: 1px solid black; } #linkList li a:link { color: red; } 

 <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <ul id="linkList"></ul>