How to fetch data from html code

Question

My html code is

<div class="l-items l-items-list l-items-btn-right l-items-offset">
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Women's Haircut</div>
    <div class="l-item-details l-item-details--service-description">
      Includes consultation, shampoo and blow-dry.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour</span>
        <span>Starting at $80</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a78335a4-7823-429a-80a1-1a0bc5cb48cd">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Men's Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>45 minutes</span>
        <span>$60</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=af560b49-c416-43fa-b49b-7eb7dec0b6a1">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Color Retouch</div>
    <div class="l-item-details l-item-details--service-description">
      A color retouch for hair that was previously colored as needs to be touched up-no more than one inch of growth please.
      This is not a touch up of highlights.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 30 minutes</span>
        <span>$90</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8a49ffc6-7cbf-4f61-ba58-25ddd1fc67e5">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Color Retouch &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $165</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=24c5eb1d-5cf8-4069-aabb-cb167d89b3e6">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">All Over Color</div>
    <div class="l-item-details l-item-details--service-description">
      Color from scalp to ends-whether a permanent tint or gloss.
      Price depends on density and length.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 45 minutes</span>
        <span>Starting at $115</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=1f9b6c6c-9357-48fa-b9dc-3c2be8a25d7c">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">All Over Color &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $185</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=10f38c3b-646e-449b-ace1-9194ecb0378c">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Partial Highlights</div>
    <div class="l-item-details l-item-details--service-description">
      Highlights at crown and sides of temples.
      Price varies on overall length and density.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $150</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=fc55e36f-4c86-4c08-bf99-7eb34b3186ad">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Partial Highlights &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours 30 minutes</span>
        <span>Starting at $220</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=4a283be2-5ef8-4e21-9258-579a9d741513">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Full Highlights</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $175</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a857c489-284f-440b-a3e0-bc8d1e57c420">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Full Highlights &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours 30 minutes</span>
        <span>Starting at $230</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=ef9f7e7b-cbec-4ca7-9dac-c8a5594045e4">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Keratin Complex Smoothing Solution</div>
    <div class="l-item-details l-item-details--service-description">
      The award winning signature treatment from Keratin Complex is a life changer that reduces frizz and curl, increases manageability and cuts daily styling time for up to four months.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours 30 minutes</span>
        <span>Starting at $250</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=150ee97f-8a1a-4b2a-b4ab-427ba005a66a">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Shampoo &amp; Blowout</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=d0683b43-e645-4693-a55e-702fce4f8155">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Bleach &amp; Tone</div>
    <div class="l-item-details l-item-details--service-description">
      Bleach and tone of new growth only -not to exceed more than one inch for even lifting.
      Note-this is not a virgin bleach and tone.  For that service please email or phone.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=879d8856-5a5c-406a-893c-c546d63b9bf0">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Consultation</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>15 minutes</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=66fcf320-9ddb-4898-8935-862d34b1c2fd">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Keratin Express Blowout</div>
    <div class="l-item-details l-item-details--service-description">
      This express service reduces frizz and blowout time.  Lasts up to 6 weeks.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 30 minutes</span>
        <span>Starting at $130</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=aa68ae07-a94e-4bd2-b116-05d86de95286">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Men's Cleanup</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>15 minutes</span>
        <span>$15</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=44660f95-3a09-4b87-9487-59d927afd44e">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Balayage/Ombre</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>3 hours</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8331ff7c-4e5e-414e-8517-a6f71a4c3dc0">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Men's Grey Blending + Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 30 minutes</span>
        <span>Starting at $105</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=062b86d1-a39d-4ce2-9567-9184eeace25d">
      <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
</div>

I want to iterate this main div to get each data from each sub div. Is there any way to convert this data into any array in jquery. I have tried to -

$('div.l-items.l-items-list.l-items-btn-right.l-items-offset').each(function(){
    var serviceName = $(this).find('div.l-item-header').text();
})

but I am getting all service name as a single element.

I want:

[{"serviceName":"Women's Haircut", "price": "$80" }, {}, {}, ...]

How could I do that?

can anyone help me here?

Rory McCrossan · Accepted Answer · 2016-12-12 15:52:27Z

To build an array from the attributes of elements within a jQuery selector you can use the map() method and return an object from it, like this:

var arr = $('.l-items .l-item').map(function() {
  return {
    serviceName: $(this).find('.l-item-header').text(),
    price: $(this).find('.l-app-price span:eq(1)').text()
  }
}).get();

console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="l-items l-items-list l-items-btn-right l-items-offset">
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Women's Haircut</div>
    <div class="l-item-details l-item-details--service-description">
      Includes consultation, shampoo and blow-dry.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour</span>
        <span>Starting at $80</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a78335a4-7823-429a-80a1-1a0bc5cb48cd">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Men's Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>45 minutes</span>
        <span>$60</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=af560b49-c416-43fa-b49b-7eb7dec0b6a1">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Color Retouch</div>
    <div class="l-item-details l-item-details--service-description">
      A color retouch for hair that was previously colored as needs to be touched up-no more than one inch of growth please. This is not a touch up of highlights.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 30 minutes</span>
        <span>$90</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8a49ffc6-7cbf-4f61-ba58-25ddd1fc67e5">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Color Retouch &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $165</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=24c5eb1d-5cf8-4069-aabb-cb167d89b3e6">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">All Over Color</div>
    <div class="l-item-details l-item-details--service-description">
      Color from scalp to ends-whether a permanent tint or gloss. Price depends on density and length.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 45 minutes</span>
        <span>Starting at $115</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=1f9b6c6c-9357-48fa-b9dc-3c2be8a25d7c">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">All Over Color &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $185</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=10f38c3b-646e-449b-ace1-9194ecb0378c">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Partial Highlights</div>
    <div class="l-item-details l-item-details--service-description">
      Highlights at crown and sides of temples. Price varies on overall length and density.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $150</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=fc55e36f-4c86-4c08-bf99-7eb34b3186ad">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Partial Highlights &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours 30 minutes</span>
        <span>Starting at $220</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=4a283be2-5ef8-4e21-9258-579a9d741513">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Full Highlights</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>
        <span>Starting at $175</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=a857c489-284f-440b-a3e0-bc8d1e57c420">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Full Highlights &amp; Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours 30 minutes</span>
        <span>Starting at $230</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=ef9f7e7b-cbec-4ca7-9dac-c8a5594045e4">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Keratin Complex Smoothing Solution</div>
    <div class="l-item-details l-item-details--service-description">
      The award winning signature treatment from Keratin Complex is a life changer that reduces frizz and curl, increases manageability and cuts daily styling time for up to four months.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours 30 minutes</span>
        <span>Starting at $250</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=150ee97f-8a1a-4b2a-b4ab-427ba005a66a">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Shampoo &amp; Blowout</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour</span>

      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=d0683b43-e645-4693-a55e-702fce4f8155">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Bleach &amp; Tone</div>
    <div class="l-item-details l-item-details--service-description">
      Bleach and tone of new growth only -not to exceed more than one inch for even lifting. Note-this is not a virgin bleach and tone. For that service please email or phone.

    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>2 hours</span>

      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=879d8856-5a5c-406a-893c-c546d63b9bf0">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Consultation</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>15 minutes</span>

      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=66fcf320-9ddb-4898-8935-862d34b1c2fd">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Keratin Express Blowout</div>
    <div class="l-item-details l-item-details--service-description">
      This express service reduces frizz and blowout time. Lasts up to 6 weeks.
    </div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 30 minutes</span>
        <span>Starting at $130</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=aa68ae07-a94e-4bd2-b116-05d86de95286">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Men's Cleanup</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>15 minutes</span>
        <span>$15</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=44660f95-3a09-4b87-9487-59d927afd44e">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Balayage/Ombre</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>3 hours</span>

      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=8331ff7c-4e5e-414e-8517-a6f71a4c3dc0">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
  <div class="l-item l-item-minisite">
    <div class="l-item-header">Men's Grey Blending + Haircut</div>
    <div class="l-item-footer">
      <div class="l-app-price">
        <span>1 hour 30 minutes</span>
        <span>Starting at $105</span>
      </div>
    </div>
    <div class="l-item-action">
      <a href="/appointments/book/d1fec381-b493-42eb-b7dd-21446585b0ac/25YERQT7GV97T/start?service_id=062b86d1-a39d-4ce2-9567-9184eeace25d">
        <button class="button--blue">Book Now</button>
      </a>
    </div>
  </div>
</div>

Youssef · Accepted Answer · 2016-12-12 15:54:32Z

0

You can do this

var items = [];    
$('div.l-items .l-item').each(function(){
     var serviceName = $(this).find('div.l-item-header').text();
     var price = $(this).find('.l-item-footer .l-app-price span:eq(1)').text();
     items.push({serviceName: serviceName, price: price});
})

answered Dec 12, 2016 at 15:54

Youssef

1,0438 silver badges16 bronze badges

1 Comment

Progi1990 Over a year ago

Thanks for replying :)

Collectives™ on Stack Overflow

How to fetch data from html code

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related