array value with space cannot be called

Question

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

Updated your code by adding the quotes at two places: jsfiddle.net/rth1m59j/2 — VVV
– VVV, Commented Jan 25, 2017 at 18:56
@vyx.ca: Why not add that as an answer rather than a comment? — Chris
– Chris, Commented Jan 25, 2017 at 19:00
@Chris Because while I was working on this, Barmar had just posted the correct answer. I felt the corrected code could help the person that asked the question so I posted the link instead of "polluting" the answer board with the exact same thing as Barmar said. — VVV
– VVV, Commented Jan 25, 2017 at 19:15

Barmar · Accepted Answer · 2017-01-25 18:55:45Z

5

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

answered Jan 25, 2017 at 18:55

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

1 Comment

Marcel Anke Over a year ago

Thank you, that's exactly what i needed

Mitchel Sellers · Accepted Answer · 2017-01-25 19:02:04Z

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

Collectives™ on Stack Overflow

array value with space cannot be called

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related