Question

我有一个简单的问题，我似乎无法修复。以下是简化版本：

var data = {
    Alabama: ['AL 1', 'AL 2', 'AL 3'],
    Alaska: ['AK 1', 'AK 2', 'AK 3'],
}

正在使用data.Alabama，data.Alaska等打印

未格式化的回报是： AL 1，AL 2，AL 3 （以逗号分隔，没有空格）。

我遇到的基本问题是使用换行符或类似内容拆分数组。 jQuery是可以接受的，我已经尝试了一些正则表达式和切片的基本方法，但似乎没有什么能回报我正在寻找的东西。唯一的限制是对data.Alabama的调用必须保持不变（即data.Alabama[0]，data.Alabama[1]是不可接受的。）

最终，我想要的输出将是数组的无序列表，如下所示：

<ul>
    <li>AL 1</li>
    <li>AL 2</li>
    <li>AL 3</li>
</ul>

但是也可以使用换行符：

AL 1<br/>
AL 2<br/>
AL 3<br/>

Answer 1

如果您确信数据永远不会包含需要HTML转义的字符，例如：

var alabama = "<ul><li>" +
  data.Alabama.join("</li><li>") +
  "</li></ul>";

会这样做。

＆＃13;

var data = {
    Alabama: ['AL 1', 'AL 2', 'AL 3'],
    Alaska: ['AK 1', 'AK 2', 'AK 3'],
};

document.getElementById('ctr').innerHTML = 
  "<ul><li>" +
  data.Alabama.join("</li><li>") +
  "</li></ul>";

＆＃13;

<div id="ctr">

</div>

＆＃13;

Answer 2

使用map和join的替代方案：

var output = ["<ul>",data.Alabama.map(function(str){
    return '\t<li>'+str+'</li>'
  }).join('\n'),"</ul>"].join("\n")

console.log(output)

打印出来：

<ul>
    <li>AL 1</li>
    <li>AL 2</li>
    <li>AL 3</li>
</ul>

将数组拆分为无序列表？

2 个答案: