How to take content from two same nodes separately? - html

Question

I have HTML file with list of product names and prices
<ul>
<li>
<label>
<span class="name">Name 1</span>
<span class="price">3.99</span>
</label>
</li>
<li>
<label>
<span class="name">Name 2</span>
<span class="price">5.49</span>
</label>
</li>
...
</ul>
and need to take names and prices from each <label> separately.
I'm using Nokogiri to parse HTML file and tried
file.xpath('//ul/li/label').each do |item|
puts item.content
end
but, as you may have guessed, it returns both name and price.

Answer 1

Name and price span elements are children of the label element, so you can fetch them using xpath within the scope of each label
file.xpath('//ul/li/label').each do |item|
name = item.at_xpath("span[#class='name']").text()
price = item.at_xpath("span[#class='price']").text()
puts "#{name} - #{price}"
end
or using css selector
file.xpath('//ul/li/label').each do |item|
name = item.at_css('.name').text()
price = item.at_css('.price').text()
puts "#{name} - #{price}"
end

Answer 2

Typically I'd use something like this:
require 'nokogiri'
doc = Nokogiri::HTML(<<EOT)
<ul>
<li>
<label>
<span class="name">Name 1</span>
<span class="price">3.99</span>
</label>
</li>
<li>
<label>
<span class="name">Name 2</span>
<span class="price">5.49</span>
</label>
</li>
</ul>
EOT
data = doc.css('label').map { |label| [label.at('.name').text, label.at('.price').text] }.to_h
# => {"Name 1"=>"3.99", "Name 2"=>"5.49"}
As long as the .name text is unique, which it seems like it should from the example HTML, the resulting hash will be valid and easy to use.
IF you need them in order then Ruby will return the key/value pairs in the order they're originally inserted if you iterate over them, which is not something I recommend relying on because in other languages you can't rely on that but your mileage might vary. Otherwise, the lookup to retrieve the value for a given key is extremely fast, no matter how many entries there are because it's a hash. And, a hash can be passed around for a lot of useful munging.