映射数组数据并添加到 HTML答案

【问题标题】：Map Array data and prepend to HTML映射数组数据并添加到 HTML
【发布时间】：2017-05-24 10:36:28
【问题描述】：

我有一个jsfiddle，它基本上接受一个数组数据并将其附加到 HTML。我使用for 循环来实现这一点。但是我很好奇如果我想使用Array.prototype.map() 函数来做到这一点，我该怎么做？我不想使用任何第三方库，例如下划线或 lodash。

【问题讨论】：

函数式编程（通常）避免了像 DOM 操作这样的副作用。所以我想说，在这里使用map 并不是一个很好的选择。

标签： javascript jquery arrays ecmascript-6

【解决方案1】：

更新的解决方案：

由于 OP 说他无法控制输入，data 由维基百科提供（可能是他们的服务之一）

然后我假设数据是结构化且正确的，即永远不会出现嵌套数组中的 1 比另一个更长或更短的情况。

是的，您绝对可以使用 map API 为您从 Wikipedia 获得的输入赋予更多意义，然后执行 forEach 迭代项目以构建您的 HTML 字符串。

示例：

var data = [["title 1","title 2","title 3"],
    ["description 1","description 2","description 3"],
    ["link 1","link 2","link 3"]];

var titles = data[0];
var descriptions = data[1];
var links = data[2];

var output = titles.map((title, index) => {
    return {
        "title": title,
        "description": descriptions[index],
        "link": links[index]
    }
});

output.forEach((item) => {
      $("#output").append(
          "<div><h1>"+ item.title +"</h1><p>"+ item.description
          +"</p><a>"+ item.link +"</a></div>"
      );
})

见 JFiddle：https://jsfiddle.net/SamuelToh/8tpb1jsg/

以前的解决方案：

首先 - 我认为选择的数据结构方式容易出错，因为标题1、描述1和链接1如何形成一个集合并没有明确的关系。

如果阵列中的 1 个不同步怎么办？也就是说，数组中的 1 个比其他数组短或长，这样您的代码将在运行时死于 index out of bond。

我认为理想情况下，您会希望数据的结构类似于；

var suggested_data = {
    title1: {
        description: "description 1",
        link: "link1"
    },
    title2: {
        description: "description 1",
        link: "link1"
    },
    title3: {
        description: "description 1",
        link: "link1"
    }
}

这样你说标题 X 具有值为 yyy 的 description 属性和值为 zzz 的链接属性。

即使缺少其中一个属性，您最多也会得到一个undefined 值。

这就是你循环结构的方式

for (var title in suggested_data) {
    var item = suggested_data[title];
    $("#output").append(
          "<div><h1>" + title+"</h1><p>" + item.description
          +"</p><a>" + item.link + "</a></div>"
      );
}

最终这与是否使用map 无关，我认为更多的是您选择的数据结构。

【讨论】：

我正在尝试构建一个维基百科查看器，而 json 数据是这样格式化的。看看这个...en.wikipedia.org/w/…?"
@anoopchandran 感谢您的更新。因为我不知道您无法控制输入。好吧，现在我已经更新了解决方案来做map，然后是forEach。在小提琴上试了一下，效果很好。

【解决方案2】：

您可以使用.map() 将新的 HTML 元素收集到一个数组中，然后在一次操作中将该结果附加到输出元素。

请注意，您应该使用 .text() 方法，而不是连接字符串，以避免大于号或 & 号破坏生成的 HTML。

下面是它的样子：

var data = [["title 1","title 2","title 3"],
            ["description 1","description 2","description 3"],
            ["link 1","link 2","link 3"]];

$("#output").append(data[0].map( (title,i) =>
    $("<div>").append(
        $("<h1>").text(title),
        $("<p>").text(data[1][i]),
        $("<a>").text(data[2][i])
    )
));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

注意：当你真的想使用第三个值作为超链接时，请使用.attr()：

$("<a>").attr('href', data[2][i]).text('click here')

或者您可能只是超链接第一个（标题）值：

$("<div>").append(
    $("<h1>").append(
        $("<a>").attr('href', data[2][i]).text(title)
    ),
    $("<p>").text(data[1][i])
)

【讨论】：