Tukukkk

I'm building a project in Nuxt.js that uses an express API using a mysql database. I have a blog in the project and am setting up comments for each blog post that can have replies to each comment. Each comment can have many replies.

I have set up two database tables for these, 'comments' and 'replys' where 'replys' has a comment_id foreign key relationship with 'comments' id. I query the database using a join like so:

SELECT * FROM comments LEFT JOIN replys ON comments.id = replys.comment_id;

which returns a response like this:

+----+---------+---------+-------------------------------+---------------------+----+------------+---------------+---------------+---------------------+

| id | post_id | user_id | content                       | created_at          | id | comment_id | reply_user_id | reply_content | reply_created_at    |

+----+---------+---------+-------------------------------+---------------------+----+------------+---------------+---------------+---------------------+

|  1 |       1 |       1 | Well thats a very lovely post | 2018-11-24 19:29:05 |  1 |          1 |             2 | it is indeed  | 2018-11-25 15:11:20 |

|  1 |       1 |       1 | Well thats a very lovely post | 2018-11-24 19:29:05 |  2 |          1 |             1 | why thanks    | 2018-11-25 15:11:39 |

+----+---------+---------+-------------------------------+---------------------+----+------------+---------------+---------------+---------------------+

So it is getting all the data I need and I just need to use it now. What I want to do is use a v-for to iterate through data but without the duplicate 'content', so something like:

<div v-for="comment in comments" :key="comment.reply_content">

  <p>{{comment.content}}</p>

  <p>{{comment.reply_content}}</p>

</div>

but of course this displays the comment.content for each of the replies it has. So I want to limit it to unique comment.content while still showing all the replies. I've tried looking at javascript functions like .map() and .join() but haven't found a way.

After lots of head scratching I'm currently making two queries to get what I need but think there must be a way to use the query I have to do what I need.

Perhaps you could use a computed property with the array method reduce to sort your comments ..

computed: {

  sortedComments() {

    return this.comments.reduce((cum, next) => {

      const lastCommentArray = cum[cum.length - 1]

      if (cum.length == 0 ||

          next.content != lastCommentArray[lastCommentArray.length - 1].content) {

        cum.push()

      }

      cum[cum.length - 1].push(next)

      return cum

    }, )

  }

}

Then you could iterate over it like this ..

<div v-for="commentArray in sortedComments" :key="commentArray[0].content">

  <p>{{commentArray[0].content}}</p>

  <p v-for="reply in commentArray" :key="reply.reply_content">{{reply.reply_content}}</p>

</div>