CODEWITHSUNDEEP
javascriptjqueryhtmljsonajax
suo
suo

Reputation: 609

Javascript - Extract html elements from json response

I have my json returning html. Shown below is the ajax bit:

$.ajax({
                type: 'POST',
                url: area.wrapper.attr('data-ajax'),
                data: data_submit,
                dataType: 'json',
                success: function( data )
                {
                      console.log(data.content);
                } 
});

console.log(data.content); returns the html shown below:

<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$63.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div>


<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$68.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div>


<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$58.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div>


<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$50.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div>

From the above html response, i want to capture the prices that are under the class: 

<span class="gdlr-tail" id = "gdlr-currencyprice">$63.00 / Night</span>

Now, the next step is should be retrieving the value from the class and this should be the way to go:

$(".gdlr-tail").each(function(i) {}

so to my question, how from my ajax response: data.content, should i capture my class attribute(gdlr-tail) to pass it to my iterating function to access my values? hope my question is clear

Upvotes: 1

Views: 1081

Answers (3)

Ori Drori
Ori Drori

Reputation: 191976

Use RegExp to extract the values:

var html = '<div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$63.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div><div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$68.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div><div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$58.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div><div class="gdlr-booking-room-wrapper" ><img src="" alt="" width="400" height="300" /></a></div><span class="gdlr-head">Start From</span><span class="gdlr-tail" id = "gdlr-currencyprice">$50.00 / Night</span></div><div class="clear"></div></div><div class="clear"></div></div></div>';

var result = html.match(/\$[\d\.]+ \/ [^<]+/gi);

console.log(result);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Syed Arif Iqbal
Syed Arif Iqbal

Reputation: 1427

try this

$(data.content)
    .find('.gdlr-tail')
        .each(function(i,el){
            alert(el);
         });

Upvotes: 1

Cully
Cully

Reputation: 6965

With jQuery, you could just do: $(data.content).find('.gdlr-tail').each(...)

Upvotes: 3

Related Questions