CODEWITHSUNDEEP
javascriptjqueryhtml
Unknown User
Unknown User

Reputation: 3668

jquery - separate JSON and HTML from AJAX Response

I have a AJAX response something like this.

[{"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌​464"}]<table id="table"></table>

It has both JSON and HTML in the response.

I wanted to separate those two things.

And use the JSON for a chart function I've created.

And then append that table to a div.

Any suggestions will be very much fruitful.

Thanks in advance.

Upvotes: 0

Views: 943

Answers (3)

Jo&#227;o Pinho
Jo&#227;o Pinho

Reputation: 3775

While I recommend you not to do that, because is to geeky and hard to maintain, You can solve id by detecting the JSON object using regex, like this:

var data = '[{"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌464"}]<table  id="table"></table>';

var json_pattr = /\[.*\]/g;
var json_str = json_pattr.exec(data)[0];
var json_data = eval( '(' + json_str.substr(1, json_str.length-2) + ')') ;

var html_pattr = /\}\].*/g;
var html_text = html_pattr.exec(data)[0];
var html_data = html_text.substr(2);

//json_data = [object]   {"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌464"}
//html_data = [text] <table id="table"></table>

The Best Solution would be to use a template engine like jquery templates to define your html, and then get your data via $.json and evaluate it agains your desired template already on the client, no need to be sending it right along with your data and be doing that kind of processing in run time.

JavaScript 

// assuming you keep receiving this
var data = 
   '[{"label":"label","label1":"67041","label2":"745","label3":"45191","label4":"11‌464"},'
  +'{"label":"label2","label1":"0000","label2":"222","label3":"333","label4":"11‌333"}]'
  +'<table id="table"></table>';

// parse the data with regex
var json_pattr = /\[.*\]/g;
var json_str = json_pattr.exec(data)[0];
var json_data = eval( '(' + json_str + ')') ;

var html_pattr = /\}\].*/g;
var html_text = html_pattr.exec(data)[0];
var html_data = html_text.substr(2);

//json_data = [object] {"label":"label","label1": ...
//html_data = [text] <table id="table"></table>   ...

// then use jquery templates to render it
var data = json_data;
$('body').append(html_data);
$('#trTemplate').tmpl(data).appendTo('#table');

HTML 

<script id="trTemplate" type="text/x-jquery-tmpl">
   <tr>
        <td>${label}</td>
        <td>${label1}</td>
        <td>${label2}</td>
        <td>${label3}</td>
        <td>${label4}</td>
    </tr>
</script>

CSS

#table, td{ border:1px solid #000; padding:5px; }

Here is an working JSFiddle example for you to test it.

Note how this works when you have more than one {json object, it's creates more lines in the table :) }

If you use jquery templates only, and now assuming that you can actually modify your output than the best thing to do is:

New JavaScript Version of Code with template only and no HTML on 'data'

$.json('http://server.com/url/service/someservice.something', function(data){
    $('body').append(<table id="#table></table>");
    $('#trTemplate').tmpl(data).appendTo('#table'); 
})

Much more simple don't you think?! Hope this helps guiding you on the right path.

Link to jquery tmpl: http://knockoutjs.com/downloads/jquery.tmpl.min.js.

Although after understanding my example, if you are building a system to scale on, and you are not just doing a simple widget app, I would recommend you to check something more robust in terms of functionalities and support like Knockoutjs as jquery tmpl has been deprecated, unfortunately.

Upvotes: 0

Kyle Needham
Kyle Needham

Reputation: 3389

Add the HTML to the JSON response and use it like you would your other values (make sure to escape your html). Also use JSONLint to make sure your JSON is valid.

[
    {
        "label": "label",
        "label1": "67041",
        "label2": "745",
        "label3": "45191",
        "label4": "11‌​464",
        "html": "<table id=\"table\"></table>"
    }
]

Upvotes: 1

underscore
underscore

Reputation: 6887

In php

$array = 'Your json array';
$html = 'Your html codes';

Make a single array with two keys

$newArray = array();

$newArray['json'] = $array;
$newArray['html'] = $html;

echo json_encode($newArray);

In Jquery 

DataType: 'JSON',
success:function(response){

response.json = 'This is your json';
response.html = 'This is your html';

}

Upvotes: 1

Related Questions