SyntaxError: Unexpected end of JSON input at parse (

Context

I just upgraded my website server to a VPS and, since moving my files to the new server, have been having some problems with the transition. One of them is that, on this server, one of my functions isn't running correctly. The function getRandomArticles() gets user-posted articles from my mySQL database. On my local server and on my previous shared server, it worked fine. However, when I run the following function on the VPS, I get the errors parserror and

SyntaxError: Unexpected end of JSON input at parse (<anonymous>) at VM3130    jquery.min.js:2 at l (VM3130 jquery.min.js:2) at XMLHttpRequest.<anonymous>    (VM3130 jquery.min.js:2)    

(from console.log(error) and console.log(errorThrown) in the error callback function)

Here's the function getRandomArticles() that returns the errors:

    var ids = [];        function getRandomArticles() {            $.ajax({              url: 'includes/articles/getRandomArticles.php',              type: 'GET',              dataType: 'json',              success: function(data) {                    var firstArticle = data[0];                    if (firstArticle.image != null) {                        var image = "<img src='images/"+firstArticle.image+"' alt='Article cover image' class='articleImage'>";                    } else {                        var image = "";                    }                    let firstArticleContent = //code for article 1                  "<div class='firstArticleContainer'>"+                      "<input type='hidden' value='"+firstArticle.articleId+"' class='articleId'>"+                      "<input type='hidden' value='"+firstArticle.idUsers+"' class='idUsers'>"+                      "<div class='firstImageContainer'>"+                          image+                      "</div>"+                      "<div class='firstContentContainer'>"+                          "<div class='topContainer'>"+                              "<div class='usernameContainer'>"+                                  "<div class='profilePicContainer'>"+                                      "<img src='images/"+firstArticle.profileImage+"' class='profilePic'>"+                                  "</div>"+                                  "<p class='username'>"+firstArticle.uidUsers+"</p>"+                              "</div>"+                              "<div class='pollIconContainer'></div>"+                          "</div>"+                          "<a href='readArticles.php?article_id="+firstArticle.articleId+"&userid="+firstArticle.idUsers+"&user=' class='title firstTitle'>"+firstArticle.title+"</a>"+                          "<p class='content firstContent'>"+firstArticle.article+"</p>"+                          "<div class='bottomContainer'>"+                              "<div class='infoContainer'>"+                                  "<div class='likesContainer'>"+                                      "<i class='far fa-thumbs-up fa-lg thumbsUp'></i>"+                                      "<p class='likeCount'></p>"+                                  "</div>"+                                  "<p class='commentCountContainer'>"+                                      "<span class='commentCount'></span> comments"+                                  "</p>"+                                  "<p class='wordCountContainer'>Word Count: "+                                      "<span class='wordCount'></span>"+                                  "</p>"+                                  "<p class='topicContainer'>Topic: "+                                      "<span class='topic'></span>"+                                  "</p>"+                              "</div>"+                          "</div>"                      "</div>"+                  "</div>";                    let firstArticleAppended = $(firstArticleContent).appendTo(".flex-container");                    var cutTitle = cutTitleText(firstArticle.title, $(firstArticleAppended).find(".title"));                    var cutArticle = cutArticleText(firstArticle.article, $(firstArticleAppended).find(".content"));                    var getInfo = checkArticleStats(firstArticle.articleId, firstArticleAppended);                      for (var i = 1; i < data.length; i++) { //code for articles 2-5                        if (data[i].image != null) {                            var image = "<img src='images/"+data[i].image+"' alt='Article cover image' class='otherArticleImage'>";                        } else {                            var image = "";                        }                        let otherArticlesContent =                      "<div class='otherArticlesContainer'>"+                          "<input type='hidden' value='"+data[i].articleId+"' class='articleId'>"+                          "<input type='hidden' value='"+data[i].idUsers+"' class='idUsers'>"+                          "<div class='otherImageContainer'>"+                              image+                          "</div>"+                          "<div class='otherContentContainer'>"+                              "<div class='topContainer'>"+                                  "<div class='usernameContainer'>"+                                      "<div class='profilePicContainer'>"+                                          "<img src='images/"+data[i].profileImage+"' class='profilePic'>"+                                      "</div>"+                                      "<p class='username'>"+data[i].uidUsers+"</p>"+                                  "</div>"+                                  "<div class='pollIconContainer'></div>"+                              "</div>"+                              "<a href='readArticles.php?article_id="+data[i].articleId+"&userid="+data[i].idUsers+"&user=' class='title'>"+data[i].title+"</a>"+                              "<p class='content'>"+data[i].article+"</p>"+                              "<div class='bottomContainer'>"+                                  "<div class='infoContainer'>"+                                      "<div class='likesContainer'>"+                                          "<i class='far fa-thumbs-up fa-lg thumbsUp'></i>"+                                          "<p class='likeCount'></p>"+                                      "</div>"+                                      "<p class='commentCountContainer'>"+                                          "<span class='commentCount'></span> comments"+                                      "</p>"+                                      "<p class='wordCountContainer'>Word Count: "+                                          "<span class='wordCount'></span>"+                                      "</p>"+                                      "<p class='topicContainer'>Topic: "+                                          "<span class='topic'></span>"+                                      "</p>"+                                  "</div>"+                              "</div>"                          "</div>"+                      "</div>";                        let otherAppendedArticles = $(otherArticlesContent).appendTo(".flex-container");                        var cutTitle = cutTitleText(data[i].title, $(otherAppendedArticles).find(".title"));                        var cutArticle = cutArticleText(data[i].article, $(otherAppendedArticles).find(".content"));                        var getInfo = checkArticleStats(data[i].articleId, otherAppendedArticles);                    }                    for (var i = 0; i < data.length; i++) {                        ids.push(data[i].articleId);                    }                    getOtherArticles(ids);                },              error: function(requestObject, error, errorThrown) {                  console.log(error);                  console.log(errorThrown);              }          });      }  

Here's my PHP code:

<?php    include '../dbh.inc.php';    if ($_SERVER['REQUEST_METHOD'] == 'GET') {    $q = "SELECT articles.article_id, articles.title, articles.article, articles.idUsers, users.uidUsers, articlecoverimages.image, profileimages.image AS profileImage FROM articles JOIN users JOIN articlecoverimages JOIN profileimages ON users.idUsers = articlecoverimages.idUsers AND articles.article_id = articlecoverimages.article_id AND profileimages.idUsers = users.idUsers WHERE articles.published = ? AND articles.approved = 1 ORDER BY RAND() LIMIT 5";  $stmt = mysqli_prepare($conn, $q);  mysqli_stmt_bind_param($stmt, 's', $published);    $published = "yes";    mysqli_stmt_execute($stmt);    $r = mysqli_stmt_get_result($stmt);    if ($r) {        if (mysqli_num_rows($r) == 0) {                $data['error'] = "";          $results[] = $data;        } else {            while ($row = mysqli_fetch_array($r)) {                            $data['articleId'] = $row['article_id'];              $data['title'] = $row['title'];              $data['article'] = strip_tags(htmlspecialchars_decode($row['article'], ENT_QUOTES));              $data['idUsers'] = $row['idUsers'];              $data['uidUsers'] = $row['uidUsers'];              $data['image'] = $row['image'];              $data['profileImage'] = $row['profileImage'];              $results[] = $data;            }               }        echo json_encode($results);    }    mysqli_stmt_close($stmt);    mysqli_close($conn);    }  

When I refresh the page many times, the code finally works and the article data loads. However, this only works about 30-40% of the time, seemingly randomly.

Things I Have Tried

I use echo json_encode($results) to return the values of the PHP file that the AJAX call points to, so I'm using JSON here. When I just say echo $results[], there is an error, and when I remove dataType: json from the AJAX parameters, there is also an error (in case those had any legitimate potential for solving the problem).

Question

Any ideas on what could be going wrong with this function?

https://stackoverflow.com/questions/65605280/syntaxerror-unexpected-end-of-json-input-at-parse-anonymous-in-ajax-call January 07, 2021 at 08:57AM