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。

另一个，内部$.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"
}]

样本：

＆＃13;

   
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);            
 });

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: