Parse JSON with HTML - modx paragraph tag issue

Question

I'm using PHP to json_encode an array and then parse it with jQuery's $.parseJSON() client-side.

$('.load-more').click(function(e) {
    e.preventDefault();

    var $this = $(this);

    var load   = $this.data('current-page') + 1;
    var parent = $this.data('parent');

    $.ajax({
        type: "GET",
        url: "http://mysite.mysite/blog/pagination-processor.html",
        data: {page: load, parent: parent},
        success: function (response) {

            response = $.parseJSON(response);

            if(response.success) {
                $(".post-list").append(response.page);

                // Update the page attribute
                $this.data('current-page', load);
            } else {
                $this.after(response.page);
                $this.remove();
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert("There seems to be a problem.");
        }
    });
});

An excerpt of the PHP where I'm using json_encode...

if(empty($page)) {
    $noResults = $modx->parseChunk('pagination-no-results',array('text' => 'No more posts!'));
    return json_encode(array(
        'success' => false,
        'page'    => $noResults
    ));
} else {
    return json_encode(array(
        'success' => true,
        'page'    => $page
    ));
}

"success: true" is self-explanatory whereas $page has been created from modx getResources array. $page is a chunk of html.

$page = $modx->runSnippet('getResources', array(
'parents'        => $parent,
'limit'          => $limit,
'offset'         => $offset,
'includeTVs'     => '1',
'tvPrefix'       => '',
'includeContent' => '1',
'tpl'            => $tpl,
'tplFirst'       => $tplFirst
));

Here is what's returned via the AJAX call.

<p>{"success":true,"page":"<div class=\"blog-post\">\n    <figure>\n        <img src=\"http:\/\/placehold.it\/580x338&text=Blog Image\">\n    <\/figure>\n    <div class=\"intro\">\n        <h1><a href=\"blog\/article-4.html\">Article 4<\/a><\/h1>\n        <p><\/p>\n        <div class=\"meta\">\n            <ul class=\"post-details\">\n                <li class=\"published\">\n                    <time pubdate=\"pubdate\" datetime=\"2014-06-28\">28\/06\/2014<\/time>\n                <\/li>\n                <li class=\"comments\">\n                    <a href=\"http:\/\/mysite.mysite\/blog\/article-4.html#disqus_thread\"><\/a>\n                <\/li>\n            <\/ul>\n            <ul class=\"post-tags\">\n                <li><a href=\"blog\/blog-filter.html?tag=responsive+design&amp;key=blog-tags\">responsive design<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n<\/div>\n<!-- \/.blog-post -->\n<div class=\"blog-post\">\n    <figure>\n        <img src=\"http:\/\/placehold.it\/580x338&text=Blog Image\">\n    <\/figure>\n    <div class=\"intro\">\n        <h1><a href=\"blog\/article-5.html\">Article 5<\/a><\/h1>\n        <p><\/p>\n        <div class=\"meta\">\n            <ul class=\"post-details\">\n                <li class=\"published\">\n                    <time pubdate=\"pubdate\" datetime=\"2014-06-28\">28\/06\/2014<\/time>\n                <\/li>\n                <li class=\"comments\">\n                    <a href=\"http:\/\/mysite.mysite\/blog\/article-5.html#disqus_thread\"><\/a>\n                <\/li>\n            <\/ul>\n            <ul class=\"post-tags\">\n                <li><a href=\"blog\/blog-filter.html?tag=responsive+design&amp;key=blog-tags\">responsive design<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/div>\n<\/div>\n<!-- \/.blog-post -->"}</p>

JSON Special Characters seem to be causing the problem (I think), as they are not escaping. I've tried a number of different approaches but with no luck.

Any help, would greatly be appreciated.

Answer 1

I see you've tagged this question with Modx. Having had the same issues a couple of times I think I know why the JSON object is wrapped in <p>-tags.

I see you're calling a resource within Modx. Do you happen to run the snippet that outputs the JSON in your Content field? Is this Content field using a Rich Text Editor like TinyMCE? If yes, go to settings on that page, turn off Rich Text, save changes, refresh page then manually remove the <p>-tags in the content field that should be showing now.