jquery調用對象的值不工作

Question

我試圖用jquery調用數據對象。我有問題顯示數據。如何在錨點擊時顯示結果標籤和分類。

也是有任何建議簡化click事件調用對象

謝謝

$(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

你幾乎沒有。您可以通過其對象的屬性索引以及您想要檢索的關鍵字來獲取[標籤]和[類別]值。

內，您的$。每（）方法，你可以打電話給他們：

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

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

現在要考慮的想法，這些密鑰可能不存在，所以你需要檢查[標籤]和[類別]是否存在。您可能需要設置條件是否那些鍵（一個或多個）存在於每個對象

// 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' 

當你得到那些需要的值，那麼你可以附加在你的[.resultProduct] DOM結果

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

下面是一個樣本jsfiddle作進一步參考：http://jsfiddle.net/5wLm4t2n/

希望這對你有幫助。