Question

我有一个像这样的对象数组

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标签，例如：

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

和数组中的其他元素一样。

由于

Answer 1

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

＆＃13;

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

＆＃13;

Answer 2

你走了：

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 元素，可以附加到文档

Answer 3

编写一个函数，将数组中的单个对象转换为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;
}

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

Answer 5

这应该这样做。由于非标准属性，您的代码不是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

如何将Javascript数组转换为HTML Span？

5 个答案: