Wie konvertiert man ein Javascript-Array in einen HTML-Bereich?

Question

Ich habe ein Array von Objekten wie diese

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

Gibt es eine Möglichkeit, so dass ich es umwandeln kann Tags mit unterschiedlichen ids wie zu überspannen:

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

Und in ähnlicher Weise andere Elemente in der Anordnung als auch .

Dank

Answer 1

können Sie das Suffix Objekt Array-Indizes als ID verwenden. Erstellen Sie dann ein Tag und erstellen Sie für jedes Mitglied des Objekts ein Attribut. Wie folgt aus:

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

Answer 2

Hier gehen Sie:

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

Jetzt items enthält vier Spanne Elemente, die auf das Dokument angehängt werden können

Answer 3

eine Funktion schreiben, die konvertiert ein einzelnes Objekt von Ihrem Array in eine span Element:

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

Sie können dann die Elemente in der Spannweiten konvertieren mit map:

let spans = data.map(itemToSpan); 

Wenn Sie dann, sie alle zu dem Dokument hinzufügen möchten, können Sie forEach:

spans.forEach(document.body.appendChild); 

So kombiniert das macht:

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

EDIT für abschließende Bemerkung zu beantworten:

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

Dies sollte es tun. Ihr Code ist nicht HTML. Aufgrund von Nicht-Standardattributen können Sie den Datenattributnamen verwenden, um HTML zu erstellen.

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

Darüber hinaus sollten Sie etwas in diese Elemente einfügen, um sie sichtbar zu machen. Sie sind im DOM, F12, um es zu sehen, aber nichts wird auf den ersten Blick angezeigt.

Fiddle:

working demo