Post
Ask Question
michael neo

michael neo

  • NA
  • 10
  • 1.3k

How to show subcomments based on comment_id using angularjs

Apr 29 2018 9:34 AM
Am learning on how to display data using angularjs and php. Both Posts and Comments displays fine but the subcomment is not displaying properly based on the comment_id.
 
This is how i do it. I inserted records into subcomment table as follows
  1. insert into subcomment(comment_id,subcomment) values('1', 'subcomment 1 of commentid 1'); 
  2. insert into subcomment(comment_id,subcomment) values('2', 'subcomment 1 of commentid 2'); 
  3. insert into subcomment(comment_id,subcomment) values('2', 'subcomment 2 of commentid 2');  
As you can see, the comment_id1 has 1 subcomment while comment_id2 has 2 subcomment.
 
The issue is that the script shows only the last 2 subcomment of commentid2 for( both commentid1 and commentid2 respectively). The Script does not show the first subcomment belonging to commentid1.
 
its seems that loops for post is what causes the issue. can someone help me fix that. I have also attached the screenshot.
below is the script
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4. <title></title>  
  5. <link href="style.css" type="text/css" rel="stylesheet" />  
  6. <style>  
  7. .comment{ border-bottom: 1px solid gray; padding: 5px; } </style>  
  8. <script src="jquery.min.js"></script>  
  9. </head>  
  10. <body ng-app='myapp'>  
  11. <div class="content" ng-controller='fetchCtrl' >  
  12. <div class="post" ng-repeat='post in posts'>  
  13. <h1 >{{ post.title }}</h1>  
  14. <div class="post-text"> {{ post.content }} </div>  
  15. <div class="post-action"> <!-- Comments --> <br>  
  16. <b>Comments</b>  
  17. <div ng-repeat='comment in post.comments'>  
  18. <div class='comment'>{{ comment.comment }}  
  19. <b>{{ comment.id }}</b></div>  
  20. <div ng-repeat='subcomment in post.subcomments'>  
  21. <div class='subcomment'>{{ subcomment.subcomment }}</div></div> </div> </div> </div> </div>  
  22. <!-- Script -->  
  23. <script src="angular.min.js"></script>  
  24. <script>  
  25. var fetch = angular.module('myapp', []);  
  26. fetch.controller('fetchCtrl', ['$scope', '$http','$timeout', function ($scope, $http, $timeout)  
  27. {  
  28. // Fetch post data  
  29. $scope.getPosts = function()  
  30. {  
  31. $http({ method: 'post', url: 'records.php', data: {request: 1} }).then(function successCallback(response)  
  32. {  
  33. $scope.posts = response.data; }); }  
  34. $scope.getPosts(); // Fetch post data } ]);  
  35. </script>  
  36. </body> </html>  
record.php
  1. <?php  
  2. include "config.php";  
  3. $data = json_decode(file_get_contents("php://input"));  
  4. $request = $data->request; $userid = 5;  
  5. // Get all posts list and like unlike  
  6. if($request == 1)  
  7. {  
  8. $response_arr = array();  
  9. $query = "SELECT * FROM posts";  
  10. $result = mysqli_query($con,$query);  
  11. while($row = mysqli_fetch_array($result))  
  12. {  
  13. $postid = $row['id'];  
  14. $title = $row['title'];  
  15. $content = $row['content'];  
  16. $type = -1; // Fetch all comments  
  17. $commentsData = mysqli_query($con,"SELECT * FROM comments WHERE post_id=".$postid);  
  18. $comments_arr = array();  
  19. while($rowComment = mysqli_fetch_assoc($commentsData))  
  20. {  
  21. $comments_arr[] = array("id"=>$rowComment['id'],"comment"=>$rowComment['comment']);  
  22. $commentid= $rowComment['id'];  
  23. } // Fetch all sub comments