CODEWITHSUNDEEP
jquery
Marcel Anke
Marcel Anke

Reputation: 57

array value with space cannot be called

i have a small problem with some code. 2 selects that are populated through the code below 

var data_business_type = [
{"category": "Automotive","type": "Please Select Type"}, 
{"category": "Automotive","type": "Auto Accessories "},
{"category": "Real Estate","type": "Please Select"},
{"category": "Real Estate","type": "Apartment & Home Rental"}/*problem here*/
];/*around 150 more 'types' in total*/

$('#r_businessCategory').append('<option selected>Please Select Category</option>');
$('#r_businessType').append('<option selected>Please Select Type</option>');
$('#r_businessOther').hide();

var r_categories = [];
 $.each(data_business_type, function(index, item) {
  if (r_categories.indexOf(item.category) < 0) {
   r_categories.push(item.category);
 };
});

$.each(r_categories, function(index, item) {
 $('#r_businessCategory').append('<option value=' + item + '>' + item + '</option>');
});

$('#r_businessCategory').on('change', function() {
 $('#r_businessType').empty();
  var business_types = [];
$.each(data_business_type, function(index, item) {
 if (business_types.indexOf(item.type) < 0 && $('#r_businessCategory').val() == item.category) {
  business_types.push(item.type);
 };
});

it works at it should except when i want the 'category' to have multiple words. jsfiddle

i'm still trying to learn so i'm not sure how to use all the brackets yet, if that changes anything.I've tried looking for a similar problem but when i try the solutions, it messes with different parts, so I haven't found a working solution yet. And sorry if it's hard to read.

Any help would be appreciated

Upvotes: 2

Views: 31

Answers (2)

Mitchel Sellers
Mitchel Sellers

Reputation: 63126

The issue is when you call val() it doesn't get anything after the space. A quick fix, is to convert spaces to underscores, and then do it back again. I'm sure someone else will have a better idea, but this works.

var data_business_type = [{
  "category": "Automotive",
  "type": "Please Select Type"
}, {
  "category": "Automotive",
  "type": "Auto Accessories "
}, {
  "category": "Real Estate",
  "type": "Please Select"
}, {
  "category": "Real Estate",
  "type": "Apartment & Home Rental"
}];
$('#r_businessCategory').append('<option selected>Please Select Category</option>');
$('#r_businessType').append('<option selected>Please Select Type</option>');
$('#r_businessOther').hide();

var r_categories = [];
$.each(data_business_type, function(index, item) {
  if (r_categories.indexOf(item.category) < 0) {
    r_categories.push(item.category);
  };
});

$.each(r_categories, function(index, item) {
  $('#r_businessCategory').append('<option value=' + item.replace(" ", "_") + '>' + item + '</option>');
});

$('#r_businessCategory').on('change', function() {
    alert($('#r_businessCategory').val());
  $('#r_businessType').empty();
  var business_types = [];
  $.each(data_business_type, function(index, item) {
    if (business_types.indexOf(item.type) < 0 && $('#r_businessCategory').val().replace("_", " ") === item.category) {
      business_types.push(item.type);
    };
  });
  $.each(business_types, function(index, item) {
    $('#r_businessType').append('<option value=' + item + '>' + item + '</option>');
  });
  $('#r_businessType').append('<option value=Other>Other</option>');
});

Upvotes: 0

Barmar
Barmar

Reputation: 781068

If an attribute value contains spaces (or some other special characters), you have to put it in quotes. It's generally a good ideal to always put quotes around attribute values. 

$('#r_businessCategory').append('<option value="' + item + '">' + item + '</option>');

You can also use a jQuery function to create the element using structured arguments.

$('#r_businessCategory').append($('<option>', { value: item }));

Upvotes: 5

Related Questions