将数组拆分为无序列表？答案

【问题标题】：Split arrays into unordered list?将数组拆分为无序列表？
【发布时间】：2015-01-08 07:53:11
【问题描述】：

我遇到了一个似乎无法解决的简单问题。以下是简化版：

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/>

【问题讨论】：

想要的输出是什么？
@sholanozie 谢谢，现在更新
你能做 data.Alabama.join("
");然后将其注入 dom
@TomChew-headMillard 不敢相信我完全忘记了 .join()。这是换行解决方案的完美方法，谢谢。

标签： javascript jquery arrays regex

【解决方案1】：

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

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

会做的。

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>";

<div id="ctr">

</div>

【讨论】：

【解决方案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>

【讨论】：