Access both html and json data returned from ajax

Question

I have an ajax page to return some data which contains a mix of HTML and Json data.I dont know which data type to use to extract the contents returned from ajax. Currently I used ajax dataType: 'html'

Kindly help me to extract the HTML and Json data from ajax.

I returned the below content from ajax

'{"id" :"Test_p","label" :"Test Property"},{"id" :"29772_l","label" :"Test Locality"},{"id" :"Universal Infrastructure Development Company_c","label" :"Test Company"},{"id" :"Test_p","label" :"Vijay Property"},{"id" :"29772_l","label" :"Vijay Locality"},{"id" :"Universal Infrastructure Development Company_c","label" :"VJ Company"}'

Please find my HTML content

<div data-ride="carousel" class="carousel slide show-number-count featured-carousel" id="carousel-ready-to-move-in" data-interval="false">

                       <div role="listbox" class="carousel-inner col-max-10 col-center carousel-area" id="readytomovein"><div id="rtmicarousel" class="item active">
                            <div class="row" id="ready_to_move_in_row"><div class="col-sm-2 col-xs-2">
                                    <div class="col-inner border prop-grid font-small bg-white">
                                        <a href="apartment-for-sale-in-ambattur-chennai-by-loyal-housing-developments-pvt-ltd-3376939" target="_blank">
                                            <img width="200" height="120" alt="" src="http://imgs.indiaproperty.com/images/ip-no-logo2.jpg" class="lazy-load display-block">
                                            <div class="nbh-vtext">Aishwarryam</div>
                                            <p class="color-primary">
                                                <span class="font-semi-bold color-green-l show">&#8377;35.46 Lacs-39.35 L..</span>
                                                  <span class="font-semi-bold show color-blue">by Loyal Housing D..</span>Ambattur
                                               </p>
                                            <div class="property-details clearfix font-x-small color-primary">
                                                <span class="pull-left">2 BHK</span>
                                                <span class="pull-right">&nbsp;</span>
                                           </div>
                                        </a>
                                    </div>
                                </div></div></div></div>

                    <a data-slide="prev" role="button" href="#carousel-ready-to-move-in" class="left carousel-nav color-primary">
                        <i class="icon-dir-left"></i>
                    </a>
                    <a data-slide="next" role="button" href="#carousel-ready-to-move-in" class="right carousel-nav color-primary"  id="next_slide_id">
                        <i class="icon-dir-right"></i>
                    </a>
                   <div class="slide-number"></div>
                </div>

I have to convert this data as javascript array object in ajax success function

Thanks.

Answer 1

Maybe this way: http://jsfiddle.net/IonDen/2L2gnxae/

// Some test ajax result
var result = '{"somejson", "value"}';
result += '<div>Some html</div>';

console.log(result);

// split result to json and html
var sl = result.indexOf("<");
var json = result.slice(0, sl);
var html = result.slice(sl);

console.log(json);
console.log(html);