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

insert into subcomment(comment_id,subcomment) values('1', 'subcomment 1 of commentid 1');
insert into subcomment(comment_id,subcomment) values('2', 'subcomment 1 of commentid 2');
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

<!doctype html>
<html>
<head>
<title></title>
<link href="style.css" type="text/css" rel="stylesheet" />
<style>
.comment{ border-bottom: 1px solid gray; padding: 5px; } </style>
<script src="jquery.min.js"></script>
</head>
<body ng-app='myapp'>
<div class="content" ng-controller='fetchCtrl' >
<div class="post" ng-repeat='post in posts'>
<h1 >{{ post.title }}</h1>
<div class="post-text"> {{ post.content }} </div>
<div class="post-action">  <br>
<b>Comments</b>
<div ng-repeat='comment in post.comments'>
<div class='comment'>{{ comment.comment }}
<b>{{ comment.id }}</b></div>
<div ng-repeat='subcomment in post.subcomments'>
<div class='subcomment'>{{ subcomment.subcomment }}</div></div> </div> </div> </div> </div>
<script src="angular.min.js"></script>
<script>
var fetch = angular.module('myapp', []);
fetch.controller('fetchCtrl', ['$scope', '$http','$timeout', function ($scope, $http, $timeout)
{
// Fetch post data
$scope.getPosts = function()
{
$http({ method: 'post', url: 'records.php', data: {request: 1} }).then(function successCallback(response)
{
$scope.posts = response.data; }); }
$scope.getPosts(); // Fetch post data } ]);
</script>
</body> </html>

record.php

<?php
include "config.php";
$data = json_decode(file_get_contents("php://input"));
$request = $data->request; $userid = 5;
// Get all posts list and like unlike
if($request == 1)
{
$response_arr = array();
$query = "SELECT * FROM posts";
$result = mysqli_query($con,$query);
while($row = mysqli_fetch_array($result))
{
$postid = $row['id'];
$title = $row['title'];
$content = $row['content'];
$type = -1; // Fetch all comments
$commentsData = mysqli_query($con,"SELECT * FROM comments WHERE post_id=".$postid);
$comments_arr = array();
while($rowComment = mysqli_fetch_assoc($commentsData))
{
$comments_arr[] = array("id"=>$rowComment['id'],"comment"=>$rowComment['comment']);
$commentid= $rowComment['id'];
} // Fetch all sub comments

Use of typescript in angular 5

Use of nginit, ngviewinit in angular 5

michael neo

How to show subcomments based on comment_id using angularjs

Answers (0)