如何用javascript从数组中填充无序列表

How to populate unordered list from array with javascript?

本文关键字：填充 无序 列表 数组 何用 javascript      更新时间：2023-09-26

我目前正在用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>" );
                  });
});

需要更改的两件事：

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

相关文章：