Anruf Objektwert mit jquery nicht

Question

arbeitet Ich versuche, mit jquery Datenobjekt zu nennen. Ich habe Probleme, Daten damit anzuzeigen. Wie kann ich nur Ergebnis-Label und Kategorie anzeigen, wenn Anker geklickt hat.

Auch Gibt es einen Vorschlag Click-Ereignis zu vereinfachen Objekt aufzurufen

danke

$(document).ready(function(){ 
 
    var data = [ 
 
    { 
 
    "id":1, 
 
    "label":"Sean", 
 
    "kategori":"Produk" 
 
    }, 
 
    { 
 
    "id":2, 
 
    "label":"Howard", 
 
    "kategori":"Produk" 
 
    }, 
 
    { 
 
    "id":3, 
 
    "label":"Paul", 
 
    "kategori":"Produk" 
 
    }, 
 
    { 
 
    "id":4, 
 
    "label":"Eugene", 
 
    "kategori":"Unit" 
 
    }, 
 
    { 
 
    "id":5, 
 
    "label":"Johnny", 
 
    "kategori":"Unit" 
 
    }, 
 
    { 
 
    "id":6, 
 
    "label":"Jacqueline", 
 
    "kategori":"Unit" 
 
    }, 
 
    { 
 
    "id":7, 
 
    "label":"Shirley", 
 
    "kategori":"Artikel" 
 
    }, 
 
    { 
 
    "id":8, 
 
    "label":"Julia", 
 
    "kategori":"Project" 
 
    }, 
 
    { 
 
    "id":9, 
 
    "label":"Russell", 
 
    "kategori":"Project" 
 
    }, 
 
    { 
 
    "id":10, 
 
    "label":"William", 
 
    "kategori":"Collection" 
 
    } 
 
]; 
 
    
 
\t \t $('.callProduct').on('click', function(e){ 
 
     e.preventDefault(); 
 
\t \t \t var call = $(this); 
 
\t \t \t var data_target = call.data('target'); 
 
\t \t \t var results = ''; 
 
\t \t \t $.each(data, function(index, value) { 
 
\t \t \t \t var resName = value.label.toString().toLowerCase(); 
 
\t \t \t \t var resCat = value.kategori.toString().toLowerCase(); 
 
\t \t \t \t if(resName != '' && data_target == resCat) { 
 
\t \t \t \t \t results += '<li>'+value.label+' - '+value.kategori+'</li>'; 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t if (results != '') { 
 
\t \t \t \t \t $('.resultProduct').append(results); 
 
\t \t \t \t } 
 
\t \t }); 
 
    
 
    \t \t $('.callUnit').on('click', function(e){ 
 
     e.preventDefault(); 
 
\t \t \t var call = $(this); 
 
\t \t \t var data_target = call.data('target'); 
 
\t \t \t var results = ''; 
 
\t \t \t $.each(data, function(index, value) { 
 
\t \t \t \t var resName = value.label.toString().toLowerCase(); 
 
\t \t \t \t var resCat = value.kategori.toString().toLowerCase(); 
 
\t \t \t \t if(resName != '' && data_target == resCat) { 
 
\t \t \t \t \t results += '<li>'+value.label+' - '+value.kategori+'</li>'; 
 
\t \t \t \t \t } 
 
\t \t \t \t }); 
 
\t \t \t \t if (results != '') { 
 
\t \t \t \t \t $('.resultProduct').append(results); 
 
\t \t \t \t } 
 
\t \t }); 
 
    
 
    
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="callData"> 
 
<ul> 
 
    <li><a href="#product" class="callProduct" data-target="product">product</a></li> 
 
    <li><a href="#unit" class="callUnit" data-target="unit">unit</a></li> 
 
    <li><a href="#artikel" class="callArtikel" data-target="artikel">artikel</a></li> 
 
    <li><a href="#project" class="callProject" data-target="project">project</a></li> 
 
</ul> 
 
</div> 
 

 
<div class="resultData"> 
 
    <div id="product"> 
 
    <ul class="resultProduct"></ul> 
 
    </div> 
 
    <div id="unit"> 
 
    <ul class="resultUnit"></ul> 
 
    </div> 
 
    <div id="artikel"> 
 
    <ul class="resultArtikel"></ul> 
 
    </div> 
 
    <div id="project"> 
 
    <ul class="resultProject"></ul> 
 
    </div> 
 
</div>

Answer 1

Sie sind fast da. Sie können die [label] - und [kategori] -Werte abrufen, indem Sie die Eigenschaftenindizes des Objekts gefolgt von ihren Schlüsseln aufrufen, die Sie abrufen möchten.

In Ihrem $ .each() -Methode, Sie können sie anrufen von:

// In getting the [label] value 
var sDataLabel = data[index].label; //Sean, Howard, Paul 

// In getting the [kategori] value 
var sDataCategory = data[index].kategori; //product 

Jetzt sind Sie auf die Idee prüfen, dass diese Schlüssel möglicherweise nicht vorhanden, so dass Sie, wenn [label] überprüfen müssen und [Kategorie] existiert oder nicht. Vielleicht möchten Bedingung eingestellt werden, ob oder nicht die, Taste (n) existiert in jedem Objekte

// Like this: 
var data = [{'id' : 10}, {'id' : 11, 'label' : 'Label1', kategori : 'products'}]; 
var sDataLabel = (data[index].hasOwnProperty('label') === true) ? data[index].label : 'No Label'; // No Label, Label 1 
var sDataCategory = (data[index].hasOwnProperty('kategori') === true) ? data[index].kategori : 'No Category'; // No Category, 'products' 

Wenn Sie diese benötigten Werte zu bekommen, dann können Sie die Ergebnisse in Ihrem [.resultProduct] DOM anhängen

var resName = sDataLabel.toLowerCase(); 
var resCat = sDataCategory.toLowerCase(); 
if (resName != '' && data_target === resCat) { 
    results += '<li>' + resName + ' - ' + resCat + '</li>'; 
} 

// This should be outside of your $.each method 
$('.resultProduct').append(results); 

Hier ist eine Probe jsfiddle für weitere Referenz: http://jsfiddle.net/5wLm4t2n/

Hoffnung, dies für Sie hilft.