.map on array into string

Question

I have a an array returned when using .map:

<li class="mix <%= p.sectors.map {|s| "#{s.name}"} %> all">

gives array:

["Content Management System", "Web Design", "Web Development"]

at the moment the returned result in my view is:

<li class="mix ["Content Management System", "Web Design", "Web Development"] all mix_all" </li>

I want to use each s.name as a class name, but I have an issue when using:

<li class="mix <%= p.sectors.map {|s| "#{s.name}"}.join(" ") %> all">

where each word is being treated as a separate class, so Web Design is now two classes rather than one.

Is there a way to have Web Design as one class or do I need to use different naming conventions, like Web-Design to make this work?

BTW, why do you use such dreadful construction as `"#{s.name}"`? — Marek Lipka, May 20 '14 at 10:29
"Web Design" are two classes because [class names are separated by white space](http://www.w3.org/TR/html401/struct/global.html#h-7.5.2) — Stefan, May 20 '14 at 10:33
@MarekLipka in reference to the construction..what would you do differently? — Richlewis, May 20 '14 at 10:37
i started with that, but read that interpolation was more efficient? — Richlewis, May 20 '14 at 10:38
http://stackoverflow.com/questions/10076579/string-concatenation-vs-interpolation-in-ruby or am i misinterpreting this? — Richlewis, May 20 '14 at 10:42
@Richlewis you're misinterpreting this. It was about string concatenation vs interpolation. You have no concatenation here. — Marek Lipka, May 20 '14 at 10:46

score 4 · Accepted Answer · answered May 20 '14 at 10:24

4

This should work:

mix <%= p.sectors.map { |s| s.name.gsub(/\s+/, '-') }.join(' ') %>

answered May 20 '14 at 10:24

Marek Lipka

49,740
7
83
88

Thanks, works a treat :-), ill accept once default time constraints pass – Richlewis May 20 '14 at 10:28
Can you show the final output ? I am not getting it – Arup Rakshit May 20 '14 at 10:31
@ArupRakshit `["Content Management System", "Web Design", "Web Development"].map { |s| s.gsub(/\s/, '-') }` `# => ["Content-Management-System", "Web-Design", "Web-Development"]` – Marek Lipka May 20 '14 at 10:32
Good answer, but I would put it in a helper method. – Mark Thomas May 20 '14 at 12:06

Max Williams · Answer 2 · 2014-05-20T10:42:56.940

You can't have a class name with spaces in it. So, you need to convert your phrases into class names. Class names are typically downcased (though this isn't a requirement) and separated with hyphens (rather than underscores, although again this isn't a requirement, just a convention).

So, you could downcase and hyphen-separate them as follows

<li class="mix <%= p.sectors.map{|sector| sector.name.downcase.gsub(/[^a-z0-9\-]+/, '-') }.join(' ') %> all">

My regex here will replace 1 or more instances of anything that's not a letter, number or hyphen, with a hyphen, so the result should be

<li class="mix content-management-system web-design web-development all mix_all">

You could move this into the model:

#in Sector class
def html_classname
  self.name.downcase.gsub(/[^a-z0-9\-]+/, '-')
end

and then change the view code to

<li class="mix <%= p.sectors.map(&:html_classname).join(' ') %> all">

.map on array into string

2 Answers2