ajax success not working even though string looks fine

Question

If a user scrolls to nearly the bottom more content shall be loaded with the help of an ajax request. This ajax request gets some data back (as a string in form of a json object - so it´s not an json object but only has to be parsed into one). Further Iactually use a plugin (JSON2HTML) which generates html after a template iterating through a json object.

JSON (before ajax):

var template = {"tag":"div","class":"parent","children":[
{"tag":"div","class":"tablee","style":"cursor:/*pointer*/;","children":[
    {"tag":"table","class":"post","children":[
        {"tag":"tbody","children":[
            {"tag":"tr","children":[
                {"tag":"td","class":"postby","children":[
                    {"tag":"img","class":"postppic","src":"propic\/${profilepic}","html":""}
                  ]},
                {"tag":"td","class":"postcontent","children":[
                    {"tag":"p","class":"postusername","children":[
                        {"tag":"a","class":"poster","href":"${username}-profile.php","html":"${username}"},
                        {"tag":"br/"},
                        {"tag":"span","class":"caption","html":"${caption}"}
                    ]}
                ]},
                ...

var data = [

    {
        "username":"momo",

        "profilepic": "momo_1.jpg",

        "caption":"", 

        "likes": "0",
    },

    {
        "username":"momo",

        "profilepic": "momo_1.jpg",

        "caption":"", 

        "likes": "0",
    },

    ...

];

var str = json2html.transform(data,template);

$("#rein").append(str);

Now if the user scrolls down more shall be loaded, the string formed like a json object is now echoed by the php the number of posts we already have in the docment is sent to (so we don´t get the same posts again...).

jQuery (ajax request when nearly bottom reached):

$(document).ready(function () {
    function loadMore()
    {
        var accountpar = $(".parent").length;
        $("h1").text(accountpar);
        $.ajax({
            url: 'homemore.php',
            type: 'post',
            data: {
                'account':accountpar
            },
            success: function(json) {
                var str = json2html.transform(json,template);
                $(str).insertAfter($('[class="parent"]').last());
                $("#rein").append();
                homejs();
            }
        });
        $(window).bind('scroll', bindScroll);
    }

    function bindScroll(){
        if($(window).scrollTop() + $(window).height() > $(document).height() - 75) {
            $(window).unbind('scroll');
            loadMore();
        }
    }

    $(window).scroll(bindScroll);
});

And that works fine to until the success is reached and data should be received. (homejs() is the jquery function that is loaded after document.ready so the first jquery written in the document.) This data looks like that (according to my google chrome browser):

var data = [

{
    "username":"momo",

    "profilepic": "momo_1.jpg",

    "caption":"",

    "likes": "0",
},

{
    "username":"momo",

    "profilepic": "momo_1.jpg",

    "caption":"",

    "likes": "0",
},

...

];

So something was received but it couldn´t be parsed? Cause that´s what console log says (is it called so? like where you can see all the errors...):

VM5454:2 Uncaught SyntaxError: Unexpected token v

json2html.transform @ json2html.js:33

//Normalize strings to JSON objects if necessary
var obj = typeof json === 'string' ? JSON.parse(json) : json; //line 33

$.ajax.success @ home.php:423

var str = json2html.transform(datanew,template); //line 423

j @ jquery-1.11.3.min.js:2

k.fireWith @ jquery-1.11.3.min.js:2

x @ jquery-1.11.3.min.js:5

b @ jquery-1.11.3.min.js:5

So can anyone of you figure out why it isn´t working? I hope I provided enough of information... Please help :']

Answer 1

Have you tried running all of the JSON through http://www.jslint.com to see if it's valid JSON?

The Unexpected token error in the json2html.transform @ json2html.js:33 file suggests that something is broken in the JSON objects. (There isn't any way for us to check them, as all 3 examples above have ellipsis in them.)

Or what about passing the json in the success function through the JSON.parse() method? See the answer at this page: I keep getting "Uncaught SyntaxError: Unexpected token o"

Update: Here is a jsfiddle for you to try out. (Scroll to the very bottom of the JS in the fiddle.)

HTML:

<div id="output1"></div>
<div id="output2"></div>

JavaScript Example 1 - Using Stringified JSON:

If your PHP file outputs this as a string, then you have to run JSON.parse on it.

var json = '[{"username": "momo", "profilepic": "momo_1.jpg", "caption": "", "likes": "0"}]';

var HTML = json2html.transform(JSON.parse(json),template);
$('#output1').html(HTML);

JavaScript Example 2 - Using JSON:

If your PHP file outputs this JSON format, then you don't need the JSON.parse method.

var json = [{"username": "momo", "profilepic": "momo_1.jpg", "caption": "", "likes": "0"}];

var HTML = json2html.transform(json,template);
$('#output2').html(HTML);

You have to see what your web server is outputting.

If you see these errors...

Unexpected token ] ... then the code is using a string (not JSON like example 1) & it has a comma before the closing bracket and it should be removed. Then run JSON.parse() on the string, to convert it to an object.

Unexpected token o ... then the code is trying to run JSON.parse() on a valid JSON object. To fix it, remove the JSON.parse() method.

Answer 2

You can replace your ajax with this to see what you get back

var accountpar = $(".parent").length;          
var data = {account:accountpar} ; 
  console.log('data',data);
 $.ajax({ 
        url: 'homemore.php',
        data: data ,
        type: 'post',
        dataType: "json",
        success: function(response) {
                  console.log(response);
         },
        error: function(jqXHR, exception) {
               if (jqXHR.status === 0) {
                   alert('Not connect.\n Verify Network.');
                } else if (jqXHR.status == 404) {
                    alert('Requested page not found. [404]');
                } else if (jqXHR.status == 500) {
                    alert('Internal Server Error [500].');
                } else if (exception === 'parsererror') {
                    alert('Requested JSON parse failed.');
                } else if (exception === 'timeout') {
                    alert('Time out error.');
                } else if (exception === 'abort') {
                    alert('Ajax request aborted.');
                } else {
                   alert('Uncaught Error.\n' + jqXHR.responseText);
                }
         }
  });