Anzeige JavaScript-Objekt in HTML

Ich habe ein Objekt, das aussieht wie dieses:

var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

Und ich möchte in der Lage sein, um die Anzeige jedes Element in das Objekt in der HTML so:

<div id="grocery_item" class="container">
    <div class="item">Item Here</div>
    <div class="category">Category Here</div>
    <div class="price">Price Here</div>
</div>

Ich weiß, wie ich eine Schleife über ein Objekt in JS, aber ich bin mir nicht sicher, wie Sie die Anzeige dieser Elemente in der DOM. Ich glaube, ich könnte mit den jQuery append-Funktion aber ich bin mir nicht sicher, wie.

Jede Hilfe würde geschätzt werden. danke!

Schnurrbart (oder eine andere zur Positionierung) ist das, was Sie brauchen, github.com/janl/mustache.js
Ich würde gerne lernen, wie zu schreiben, es mit JS oder jQuery ersten.
Objekte (offiziell) keine Ordnung. Es wäre besser, grocery_list ein array von Objekten und fügen Sie die Eigenschaft name, um die Objekte mit Banana und Chocolate etc.

InformationsquelleAutor theartofbeing | 2014-12-03

  1. 4

    Dies ist, wie Sie es tun können mit jQuery (wie Sie erwähnen, das Sie verwenden möchten jQuery ersten). Aber es ist nicht die beste Art und Weise, wie es. Wenn Sie sind offen zu lernen bessere Methoden, dann schauen Sie einige der MV* frameworks (AngularJS, Ember, etc.). Wie auch immer, hier ist nur ein Beispiel:

    var grocery_list = {
  "Banana": { category: "produce", price: 5.99 },
  "Chocolate": { category: "candy", price: 2.75 },
  "Wheat Bread": { category: "grains and breads", price: 2.99 }
}

var wrapper = $('#wrapper'), container;
for (var key in grocery_list){
    container = $('<div id="grocery_item" class="container"></div>');
    wrapper.append(container);
    container.append('<div class="item">' + key +'</div>');
    container.append('<div class="category">' + grocery_list[key].category +'</div>');
    container.append('<div class="price">' + grocery_list[key].price +'</div>');
}

    jsfiddle hier:

    http://jsfiddle.net/5jhgbg9w/

    EDIT: Bitte, nehmen Sie diese wirklich als Beispiel (das ist OK, da Sie das lernen sind). Wie andere darauf hingewiesen - es ist nicht die beste Methode. Versuchen Sie zu kombinieren andere Beispiele, vor allem diejenigen, die nicht erstellen Sie HTML als string. Für einfache Aufgaben wie dieser ist es unkompliziert, aber mehr code, den Sie hinzufügen mehr chaotisch der code wird. Ich glaube, Ihr "Lern-evolution" würden Sie es trotzdem 🙂 Cheers jeder

    Sie können immer noch Template ohne die Verwendung von anderen frameworks. Ein einfaches Beispiel: jsfiddle.net/5jhgbg9w/1 . Ihre version ist auch offen für unerwünschte html-Injektion.
    Genial...danke @ivan.sivak ! Wie kann ich das display zum arbeiten auf die gleiche Seite, wo ich die form haben, wobei die Daten? JSFiddle hier: jsfiddle.net/kemr26e0
    dies ist eine Schule-Zuordnung? Es ist nicht der beste code eh und je, aber imho kann man lernen zu verbessern, indem Sie sich von hier aus auf: jsfiddle.net/e74443zc
    Es ist ein Schulprojekt...wir sind nur zu lernen, wie zu integrieren JS in den DOM.
    Das war der trick...danke eine Tonne. ivan.sivak danke eine Tonne, wie gut. Manchmal brauche ich nur um zu sehen, wie jemand anderes tut es, damit ich es verstehen kann.

    InformationsquelleAutor Ivan Sivak

  2. 2

    Können Sie erstellen, HTML-Elemente mit jQuery: $('<div>', {attr1: value, attr2: value}); Dies gibt ein neues jQuery-Objekt, so dass Sie können es verwenden wie jQuery element.

    Den jQuery.text() Methode: $('div').text('some text') Diese Methode wird empfohlen, wenn Sie setzen einfach den text in das element. Es wird die Flucht aller Sonderzeichen wie '<'. Stattdessen wird &lt. Diese Vermeidung von XSS-Angriffen im Gegensatz zu jQuery.html () - Methode.
    Sie können schauen, Überlegungen zur Sicherheit auf jQuery docs über .html-Methode.

    //Create a div element with jQuery which will hold all items.
var $tree = $('<div>', {id: 'items-tree'});
//Loop all items and create elements for each
for (var key in grocery_list) {
  var $gItem = $('<div>', {
    id: 'grocery_item',
    class: 'container'
  });

  var $item = $('<div>', {
    class: 'item'
  }).text(key);
  $gItem.append($item);

  var $category = $('<div>', {
    class: 'category'
  }).text(grocery_list[key].category);
  $gItem.append($category);

  var $price = $('<div>', {
    class: 'price'
  }).text(grocery_list[key].price);
  $gItem.append($price);

  $tree.append($gItem);
}

    JSFiddle

    InformationsquelleAutor Ifch0o1

  3. 0

    Dem übergeordneten div <div id="grocery_item" class="container"> wiederholt sich das nicht. der Artikel in der Einkaufsliste.
    Die "id" des übergeordneten div-Element wird zufällig generiert z.B. item @index 0 wird "grocery_item0"

    For-each-Schleife Element erstellen des übergeordneten div 's zuerst, dann beginnen Sie, den details zu den übergeordneten div' s mit (einer anderen Schleife).
    Im folgenden Beispiel jquery,

    $( ".grocery_item0" ).append( "" );

    Ich bekomme, was du sagst, aber ich habe nie realisiert, bevor so dass ich nicht sicher bin, wie es code, so dass es sendet, um das div-element...

    InformationsquelleAutor Raghava Rudrakanth P V

  4. 0

    Ich pass wird durch die Tatsache, dass Ihre Liste definition ist nicht gerade das beste und ich sagen:

    Mithilfe von jQuery kann man auch machen:

    <script>
var _parent = $(".container").parent();
_parent.empty();

var _html;
$.each(grocery_list,function(prop, val){
    _html = "<div id=\"grocery_item\" class=\"container\">";
    _html += "<div class=\"item\">"+prop+"</div>";
    _html += "<div class=\"category\">"+val.category+"</div>";
    _html += "<div class=\"price\">"+val.price+"</div>";
    _html += "</div>";

    _parent.append(_html);
});
</script>

    Hinweis*: Es ist nicht empfohlen, maanipulate den DOM durch das erstellen von HTML-strings. Dies ist nur ein schnelles Beispiel für Ihre Schule-Zuordnung.

    Sollten Sie nicht übertragen, die schreckliche Idee, der Gebäude als HTML-strings.
    Nun, wie Sie sehen können alle Lösungen, die in die gleiche Richtung und ich bin der einzige, der bekam eine -1 Das ist nicht fair ...:))
    Wenn Sie Bearbeiten Ihre Antwort, die es geben würde-down-Wählern eine chance der re-Abstimmung.

    InformationsquelleAutor Alexandru Aliu

Schreibe einen Kommentar