call object value with jquery not working

Question

I'm trying to call data object with jquery. I have problem to show data with it. How I can display result only label and kategori when anchor clicked.

Also Is there any suggestion to simplify click event to call object

thank you

$(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"
  }
];
 
		$('.callProduct').on('click', function(e){
      e.preventDefault();
			var call = $(this);
			var data_target = call.data('target');
			var results = '';
			$.each(data, function( index, value ) {
				var resName = value.label.toString().toLowerCase();
				var resCat = value.kategori.toString().toLowerCase();
				if( resName != '' && data_target == resCat) {
					results += '<li>'+value.label+' - '+value.kategori+'</li>';
					}
				});
				if (results != '') {
					$('.resultProduct').append(results);
				}
		});
    
    		$('.callUnit').on('click', function(e){
      e.preventDefault();
			var call = $(this);
			var data_target = call.data('target');
			var results = '';
			$.each(data, function( index, value ) {
				var resName = value.label.toString().toLowerCase();
				var resCat = value.kategori.toString().toLowerCase();
				if( resName != '' && data_target == resCat) {
					results += '<li>'+value.label+' - '+value.kategori+'</li>';
					}
				});
				if (results != '') {
					$('.resultProduct').append(results);
				}
		});
  
  
});

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

Marylyn Lajato · Accepted Answer · 2017-03-07 14:24:58Z

1

You're almost there. You can get the [label] and [kategori] values calling it via its object's properties indexes followed by their key(s) you wanted to retrieved.

Inside your $.each() method, you can call them by:

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

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

Now you want to consider the idea that those keys may not exist, so you need to check if [label] and [kategori] exists or not. You might want to set condition whether or not those key(s) exists in each objects

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

When you get those needed values, then you can append the results in your [.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);

Here's a sample jsfiddle for further reference: http://jsfiddle.net/5wLm4t2n/

Hope this helps for you.

answered Mar 7, 2017 at 14:24

Marylyn Lajato

1,1711 gold badge10 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marylyn Lajato Over a year ago

Also I wanted to verify if you intentionally place 'kategori' instead of 'category'?

rnDesto Over a year ago

I deliberately place kategori and not use name for label because I wanted to get multiple value from object. It was great explaination, thank you

Collectives™ on Stack Overflow

call object value with jquery not working

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related