jQuery JSON anfügen ul nach der Anzahl der Array-Sets

Question

Ich möchte jQuery neue ul für jeden Satz von Produkten zu machen. Innerhalb jedes ul werden alle Elemente jedes Satzes angehängt. Das Ergebnis war unerwartet; es sollte nur 2 ul sein, aber wurden angehängt.

Meine jQuery

$.getJSON('/products.json', function (result) { 
    var booksobj = result.ebooks.basic; 

    /* EBOOKS*/ 
    $.each(booksobj.set, function(i, item) { 
     $('#ebook').append('<ul>'); // Append new list sets 
     $('#ebook ul').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>'); 
    }); 
}); 

products.json

{ 
    "ebooks": { 
     "basic": { 
      "set": [ 
       { 
        "title": "PDF Sample", 
        "product_id": 1, 
        "type": "ebook" 
       }, 
       { 
        "title": "PDF Sample", 
        "product_id": 2, 
        "type": "ebook" 
       }, // ... 
      ], 
      "set": [ 
       { 
        "title": "PDF Sample", 
        "product_id": 1, 
        "type": "ebook" 
       }, 
       { 
        "title": "PDF Sample", 
        "product_id": 2, 
        "type": "ebook" 
       }, // ... 
      ] 
     } 
    } 
} 

Vielen Dank im Voraus.

Answer 1

Sie schleifen über set und für jedes Element in einem Set erstellen Sie ein neues ul Element. Sie müssen mehrere Schleifen haben, wo Sie eine ul erstellen und danach alle li s für den Abschnitt hinzufügen. Ich habe Ihre Datenstruktur geändert, Sie benötigen die set Eigenschaften nicht (und sie überschreiben sich gegenseitig, da Eigenschaftsnamen eindeutig sind). basic ist jetzt ein Array, das aus Arrays besteht, die eine set darstellen.

var data = { 
 
    "ebooks": { 
 
     "basic": [ 
 
      [ 
 
       { 
 
        "title": "PDF Sample 1", 
 
        "product_id": 1, 
 
        "type": "ebook" 
 
       }, 
 
       { 
 
        "title": "PDF Sample 2", 
 
        "product_id": 2, 
 
        "type": "ebook" 
 
       }, 
 
      ], 
 
      [ 
 
       { 
 
        "title": "PDF Sample 3", 
 
        "product_id": 1, 
 
        "type": "ebook" 
 
       }, 
 
       { 
 
        "title": "PDF Sample 4", 
 
        "product_id": 2, 
 
        "type": "ebook" 
 
       }, 
 
      ] 
 
     ] 
 
    } 
 
} 
 

 

 
data.ebooks.basic.forEach(function(set) { 
 
    var $list = $('<ul></ul>'); 
 
    
 
    set.forEach(function(pdf) { 
 
     $list.append('<li>' + pdf.title + '</li>') 
 
    }); 
 
       
 
    $('#ebook').append($list); 
 
});

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

Answer 2

Es sieht aus wie das Problem von den Wählern in diesem Snippet stammt:

$('#ebook').append('<ul>'); // Append new list sets 
    $('#ebook ul').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>'); 

Der Selektor "$ ('# ebook ul')" wird nicht wählen die Neu hinzugefügte ul in der Iteration, stattdessen wird es an die erste Übereinstimmung angehängt (also die erste ul zum #ebook div hinzugefügt). Stattdessen versuchen Sie Ihre Anrufe Verkettungs wie so:

/* EBOOKS*/ 
$.each(booksobj.set, function(i, item) { 
    $('#ebook').append('<ul>').append('<li><a href="#" data-id="' + item.product_id + '" data-type="' + item.type + '">' + item.title + '</a></li>'); 
}); 

Arbeitsbeispiel mit JSON-Daten in einer Variablen: http://codepen.io/JasonGraham/pen/WxbvRo

Answer 3

Ihr Problem ist die Verwendung $ ('# ebook ul), eine andere Frage, warum Sie die verwenden Taste "set" zwei Mal? Kein Sinn,

var data = { 
"ebooks": { 
    "basic": [ 
     [ 
      { 
       "title": "PDF Sample 1", 
       "product_id": 1, 
       "type": "ebook" 
      }, 
      { 
       "title": "PDF Sample 2", 
       "product_id": 2, 
       "type": "ebook" 
      }, 
     ], 
     [ 
      { 
       "title": "PDF Sample 3", 
       "product_id": 1, 
       "type": "ebook" 
      }, 
      { 
       "title": "PDF Sample 4", 
       "product_id": 2, 
       "type": "ebook" 
      }, 
     ] 
    ] 
} 
} 


$.each(data.ebooks.basic, function(i, item) { 
    $('#ebook').append('<ul>'); // Append new list sets 
    $.each(item, function(i, item2) { 
    $('#ebook ul:last').append('<li><a href="#" data-id="' + item2.product_id + '" data-type="' + item2.type + '">' + item2.title + '</a></li>'); 
}); 
}); 

sehen die fiddle