如何将 Javascript 数组转换为 HTML Span？ [关闭]答案

【问题标题】：How to convert an Javascript Array to an HTML Span? [closed]如何将 Javascript 数组转换为 HTML Span？ [关闭]
【发布时间】：2018-04-04 02:37:57
【问题描述】：

我有一个这样的对象数组

var data = [{
        "name": "Lichtbediening",
        "category": "category",
        "info": "Klik voor lichtbediening",
        "img": "lichtbediening"
}, {
        "name": "Stopcontact",
        "category": "category",
        "info": "Klik voor stopcontacten",
        "img": "stopcontacten"
}, {
        "category": "Lichtbediening",
        "name": "Enkele schakelaar",
        "info": "Een knop, een lamp",
        "img": "rolluikbediening"       
}, {
        "category": "Stopcontact",
        "name": "Enkel stopcontact",
        "info": "Twee knoppen, twee lampen",
        "img": "multimedia"     
}];

有没有办法可以将其转换为具有不同 id 的跨度标签，例如：

<span id="element1">
    name="Lichtbediening"
    category="category"
    info="Klik voor lichtbediening"
    img="lichtbediening"></span>

数组中的其他元素也是如此。

谢谢

【问题讨论】：

喜欢数组中的每个元素转换为
当然有，但 Stackoverflow 不是“如何” 教程服务。您应该能够在网络上找到很多资源来解释如何
jsbin.com/juhinihule/edit?html,js,output

标签： javascript html arrays dom

【解决方案1】：

编写一个函数，将数组中的单个对象转换为span 元素：

function itemToSpan(item, index) {
    let span = document.createElement('span');
    span.id = 'element' + (index + 1);
    for (const field : item) {
        span.setAttribute(field, item[field]);
    }
    return span;
}

然后您可以使用map 将项目转换为跨度：

let spans = data.map(itemToSpan);

如果您想将它们全部添加到文档中，可以使用forEach:

spans.forEach(document.body.appendChild);

如此组合使得：

data.map(itemToSpan).forEach(document.body.appendChild);

编辑回答最终评论：

function itemToSpan(item, index) {
    let span = document.createElement('span');
    span.id = 'element' + (index + 1);
    // Iterate over each field in the object
    for (const field : item) {
        span.innerText += field + '="' + item[field] + '" ';
    }
    // Strip the trailing space
    span.innerText = span.innerText.trim();
    return span;
}

【讨论】：

谢谢 .. 我们能得到像 name="Lichtbediening" category="category" info="Klik voor lichtbediening" img="lichtbediening" 这样的跨度吗其中 name 、 category 等实际上是 span 的主体，而不是设置为属性

【解决方案2】：

您可以使用对象数组索引作为 id 后缀。然后创建一个标签并为对象的每个成员创建一个属性。像这样：

var data = [{
  "name": "Lichtbediening",
  "category": "category",
  "info": "Klik voor lichtbediening",
  "img": "lichtbediening"
}, {
  "name": "Stopcontact",
  "category": "category",
  "info": "Klik voor stopcontacten",
  "img": "stopcontacten"
}, {
  "category": "Lichtbediening",
  "name": "Enkele schakelaar",
  "info": "Een knop, een lamp",
  "img": "rolluikbediening"
}, {
  "category": "Stopcontact",
  "name": "Enkel stopcontact",
  "info": "Twee knoppen, twee lampen",
  "img": "multimedia"
}];

for (var i = 0; i < data.length; i++) {
  var span = document.createElement("span");
  span.id = "element" + i;
  var content = "";
  for (var a in data[i])
    content += " " + a + "='" + data[i][a] + "'";
  span.innerHTML = content;
  console.log(span);
  document.body.appendChild(span);
}

【讨论】：

投反对票的人能解释一下原因吗？
感谢您的快速响应.. 请您建议一个 jquery 方法，以便我可以获取 id（如 id = element0）并在单击按钮时显示第一个数组元素。再次感谢
@Nicole 请搜索您的第二个问题的现有答案，如果还没有，请为其创建一个新问题。
@BillyBrown 是对的。这值得提出另一个问题。
谢谢.. 有没有办法在 span 标签的主体中获取数组元素，如 name="Lichtbediening" category="category" info="Klik voor lichtbediening " img="lichtbediening" 不要将它们设置为属性

【解决方案3】：

应该这样做。由于非标准属性，您的代码不是 HTML，您可以使用 data-atribute-name 使其成为 HTML。

   var data = [{
            "name": "Lichtbediening",
            "category": "category",
            "info": "Klik voor lichtbediening",
            "img": "lichtbediening"
    }, {
            "name": "Stopcontact",
            "category": "category",
            "info": "Klik voor stopcontacten",
            "img": "stopcontacten"
    }, {
            "category": "Lichtbediening",
            "name": "Enkele schakelaar",
            "info": "Een knop, een lamp",
            "img": "rolluikbediening"       
    }, {
            "category": "Stopcontact",
            "name": "Enkel stopcontact",
            "info": "Twee knoppen, twee lampen",
            "img": "multimedia"     
    }];

    data.forEach(function(element) {
        var span = document.createElement("span");
        span.setAttribute("id", "democlass");
        span.setAttribute("name", "democlass");
        span.setAttribute("category", "democlass");
        span.setAttribute("info", "democlass");
        span.setAttribute("img", "democlass");
        console.log(span);
        document.body.appendChild(span);
    })

此外，您应该在这些元素中插入一些内容以使它们可见。它们在 DOM 中，按 F12 可以看到它，但第一眼看不到任何东西。

小提琴：

working demo

【讨论】：

【解决方案4】：

for (var i = 0; i < data.length; i++) {
    //create a span element for each data object in the array
    var span = document.createElement("span");

    //set the id, name, category, img and info attributes of each 
    object in the array
    span.setAttribute("id", "element" + i);
    span.setAttribute("name", data[i].name);
    span.setAttribute("category", data[i].category);
    span.setAttribute("info", data[i].info);
    span.setAttribute("img", data[i].info);

    //append each span element to the body of the html
    document.body.appendChild(span);
}

【讨论】：

【解决方案5】：

给你：

var items = data.map(function (item, i) {
  var span = document.createElement('span');
  for (var x in item) {
    span.setAttribute(x, item[x]);
  }

  span.setAttribute('id', 'element'+(i+1));

  return span;
});

现在items 包含四个span 元素，可以附加到文档中

【讨论】：