Click here to Skip to main content
15,358,440 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
This is to get the annotation data from the server, render it with js and display it on the screen.

A random error occurs. The value returned by php is correct, but it throws an error in js. It works normally, but randomly throws an error.

Uncaught TypeError: Cannot read properties of undefined (reading 'user_id')

Looking at the network, the values ​​returned by php are correct. This either throws an error or works fine, depending on the content being commented on.

What I have tried:

$(document).ready(function(){

    $( document ).on('click' , '.view_comments' , function(){
        let id = $(this).attr("id");
        let content = $("#comment-post-"+id).val();

        $.ajax({
             type:"GET",
             url: "view_comment.php",
             data:{ enclosure: content },
             success:function(html){
                 var result = JSON.parse(html);
                 if( result.length > 0 ){
                     var comment = '';
                     for(let i = 0; i < 5 ; i++ ){
                         var comment_list = comment_object();
                         comment_list.set_properties( result[i] );
                         comment += comment_list.get_html();			
                     }
                     $("ul#comments-"+id).append(comment);
                     $(this).html('More Comments');
                 }
             },
            error: function( xhr ){
                /* error_log */ 
                console.log(xhr.status+' '+xhr.statusText);
            }
        });
        return false;       
    });       


var comment_object = function(){
    var user_id = '';
    var username = '';
    var date = '';
    var comment = '';

    return {
	set_properties: function( data ){
        user_id = data['user_id'];
	    username = data['username'];
	    date = data['date'];
	    comment = data['comment'];	   
	},	
	get_html: function(){
	    return "<li class='wts-comment'><div class='wts-comment-left'>"+username+""+date+"</div><div class='wts-comment-text'><div class='wts-comment-wrapper'>"+comment+"</div><div class='wts-comment-action-icons'><div class='wts-comment-action-btn'></div><div class='wts-comment-action-btn '></div><div class='wts-comment-action-btn'>Comment</div></div></div></li>";
	}
    };
};
   
});

/* view_comment.php */
$id = $_GET['enclosure'];

$conn = db_connect();
$result = $conn->query("select user.user_id, user.username, comments.comment, comment.date from user, comments where comments.content=".$id." and comments.author = user.id order by comments.date DESC limit 5") or die("access failed". mysqli_error( $conn ) );

 $rows = array();
 while( $r = mysqli_fetch_assoc( $result ) ){
     $rows[] = $r;
 }
 print( json_encode( $rows ) );
Posted
Updated 28-Apr-22 2:05am
v2
Comments
Richard Deeming 28-Apr-22 5:02am
   
Your code is vulnerable to SQL Injection[^]. NEVER use string concatenation/interpolation to build a SQL query. ALWAYS use a parameterized query.
PHP: SQL Injection - Manual[^]
Chris Copeland 28-Apr-22 6:17am
   
Maybe I'm mixing wires here but you have print( json_decode( $rows ) ); which takes a string value and converts it into a PHP object, shouldn't you instead be using: print( json_encode( $rows ) ); which takes an object/array and converts it into a JSON string?
Chopin2001 28-Apr-22 6:50am
   
I'm sorry. json_encode() is right. I made a mistake while typing. Real code uses json_encode().

1 solution

You may be iterating outside of the bounds of the comments in the response:
               vvvvv
for(let i = 0; i < 5 ; i++ ){
  var comment_list = comment_object();
  comment_list.set_properties( result[i] );
  comment += comment_list.get_html();			
}

You're looping 5 times to extract values from the result, however there's no guarantee that the returned array is going to contain 5 items. You already check for length, so instead loop based on the length of the array:
for (let i = 0; i < result.length; i++) {

Or you can alternatively use the more modern of operator:
for (const item of result) {
   
Comments
Chopin2001 28-Apr-22 12:35pm
   
if( result.length > 0 ){
var comment = '';
for( const item of result )
var comment_list = comment_object( );
comment_list.set_properties( item );
comment += comment_list.get_html();
}
$("ul#comments-"+id).append(comment);
$(this).html('More Comments');
}
This issue has been improved.
Thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900