Javascript - Extract html elements from json response

Question

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

Why not just return only the HTML you actually need? Using JSON to wrap HTML is pretty redundant. Also the HTML you generate is invalid as you've repeated the same id; they need to be unique — Rory McCrossan
– Rory McCrossan, Commented Oct 18, 2016 at 7:05
The html is generated from a backend script that iterates hence the same id. Would be interested though on advice on how to return HTML that i ONLY need. thanks — suo
– suo, Commented Oct 18, 2016 at 7:11
You can iterate without using the same ID twice. If you need each element to have the same selector, use a class. Using an ID for this totally defeats the purpose of having an id. — Tom
– Tom, Commented Oct 18, 2016 at 7:20
As per Rory's suggestion you can just return the HTML as a string from your server side script & then put it in desirable parent or anything else.For this you will need to change the dataType attribute of your ajax to html instead of json — techie_28
– techie_28, Commented Oct 18, 2016 at 7:24
I get your point @techie_28 and that would work but apart from the html, there's more being returned from the response so it needs to remain as ajax. — suo
– suo, Commented Oct 18, 2016 at 7:34

Cully · Accepted Answer · 2016-10-18 07:13:03Z

3

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

answered Oct 18, 2016 at 7:13

Cully

6,9956 gold badges43 silver badges64 bronze badges

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

Comments

Syed Arif Iqbal · Accepted Answer · 2016-10-18 07:18:56Z

1

try this

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

answered Oct 18, 2016 at 7:18

Syed Arif Iqbal

1,42712 silver badges16 bronze badges

Comments

Ori Drori · Accepted Answer · 2016-10-18 07:34:01Z

0

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>

edited Oct 18, 2016 at 7:34

answered Oct 18, 2016 at 7:18

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

1 Comment

suo Over a year ago

Excellent. all the answers are technically right but this one hammers the point

Collectives™ on Stack Overflow

Javascript - Extract html elements from json response

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related